React hook의 종류
useState
- 가장 많이 사용되는 훅, 함수형 컴포넌트에서도 state를 지닐 수 있게 해준다.
- 화면 렌더링과 관련된 데이터를 다룰 때 쓰이며, 이는 state를 바꾸면 컴포넌트가 리랜더링 된다는 것을 의미
useEffect
- useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행
- cleanup 함수를 return하면 컴포넌트가 언마운트 되기 전에 지정한 작업을 수행
- 데이터 중심으로 실행
useRef
- ref는 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공
- useRef는 함수형 컴포넌트에서 refㅡㄹㄹ 쉽게 사용할 수 있도록 해주는 hook(HTML의 id와 유사)
- 화면 리렌더링과 관련이 없는 컴포넌트 로컬 변수를 사용해야 할 때 활용가능
useCallback
- useCallback은 함수를 캐싱(또는 메모제이션)할 때 사용하는 hook
- 컴포넌트의 렌더링 성능 최적화
- 두 번째 파라미터 값으로 들어가는 deps 배열이 비어있으면, 컴포넌트가 렌더링 될 때 만들었던 함수가 계속 재사용
- deps에 특정 값이 있으면 그 값이 바뀔때마다 함수를 새로 만들어 캐싱
- 이전에 계산한 값을 메모리에 저장하여 동일한 계산의 반복 수행을 제거
useMemo
- useMemo는 컴포넌트 내부에서 발생하는 연산을 최적화 할 때 사용
- 렌더링 과정에서 특정 값이 바뀌었을때만 연산, 바뀌지 않았다면 이전 결과값을 사용
- useCallback과 마찬가지로 deps 배열이 존재하며 deps 배열 내부의 값이 달라지면 기존 캐싱된 것을 버리고 새로 값을 구하는방식으로 실행
- useMemo와 useCallback
useCallback은 함수 자체를 캐싱하고, useMNemo는 값을 캐싱한다.
출처 - https://ksmfou98.github.io/Interview/
