[React] Hooks - 함수형 컴포넌트
- useState : 가장 기본적인 Hook 이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다.
배열로 사용할 때, 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수입니다.
- useEffect : 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 입니다.
클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방합니다.
useEffect(() => {
console.log('~');
}, [] );
뒤에 [] 를 넣어서, 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행할 수도 있으며,
[ ] 안에 파라미터를 넣어, 해당 파라미터에 변경되는 점만을 캐치해낼 수도 있습니다.
- useReducer : useState 보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때
사용하는 Hook 입니다.
리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달받아 새로운 상태를 반환하는 함수입니다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜 주어야 합니다.
따라서 ... 의 의미는 불변성을 지키면서 변화된 state 값을 돌려주기위해 사용되는 의미입니다.
제가 이해한 바로는 input 태그 value에 사용할 jsx 를 지정해주고 값을 입력하면 onChange 함수로 넘어간다.
useReducer 에서의 액션은 어떤 값도 사용 가능하므로, e.target 이 dispatch 함수로 인해서 action 을 발생시킨다.
이제 입력한 name, nickname 값이 state에 담기고 Hook 인 useReducer 에서 state값과 앞에서 입력한 dispatch ( name, nickname 을 타이핑한 ) 함수를 받아온다.
결과적으로 name, nickname 의 파라미터로 dispatch 된 값으로 변형된 값이 넘어오고 reducer 함수를 호출한다.
reducer 함수에서는 현재 state 초기값은 공백 이고, 입력할 때마다 action 에 대한 벨류를 action.name 으로 지정하여
UI 에 표시해준다.
useReducer를 사용했을 때의 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 것입니다.
( 이 부분은 말이 이해가 잘 안되네요.. 로직이 어떻게 흘러가는지는 알겠는데 )
- useMemo : 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다.
- useCallback
useCallback 은 useMemo 와 비슷합니다. 나눠 쓰는 이유로는 렌더링 성능을 최적화해야 하는 상황에서 사용합니다.
useCallback hook 을 사용하면 만들어 놨던 함수를 재사용할 수 있습니다.
컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화하는 useCallback
을 사용하면 좋습니다.
useMemo 에서 onChange 와 onInsert 만 바뀌었고,
useCallback 의 첫번 째 파라미터에는 생성하고 싶은 함수를 넣고,
두 번째 파라미터인 배열([ ] )을 넣으면 됩니다.
비어있으면 계속 함수를 사용하고, 인풋값이 있으면 인풋내용이 바뀌거나 새로운 항목이
추가될 때 새로 만들어진 함수를 사용하게 됩니다.
참고&출처 : 리액트를 다루는 기술 도서 중