React Hook 정리

gongyoon·2023년 1월 6일
0

  • useState 훅은 함수형 컴포넌트에서 상태값 관리를 위해 사용 / 상태값 변경 함수는 비동기로 동작 / 참조타입을 상태값으로 관리하는 경우 깊은비교, 얕은비교 주의 / 상태값 변경 시, 컴포넌트는 re-rendering(자식 컴포넌트 포함)

  • useEffect 훅은 함수형 컴포넌트에서 부수효과를 관리하기 위해 사용 / 의존성 배열에 따라 부수효과 함수 실행여부를 결정

  • useRef 훅은 실제 DOM 요소에 접근할때 사용하며, ref 객체를 통해 접근 / 조건부 렌더링을 사용하는 경우에 ref.current 속성이 없을수도 있기때문에 검사하는 로직이 필요 / useRef 훅을 사용하여 렌더링과 무관한 값을 저장가능 / ref 속성에 함수 지정 가능

  • useContext 훅은 Consumer 컴포넌트를 사용하지 않고 context API 로 부터 전달되는 데이터를 쉽게 사용 가능 / useContext 훅을 사용하는 경우 해당 컴포넌트는 context 에 의존적인 컴포넌트가 되어버리기 때문에 context 데이터가 변경되면 컴포넌트가 re-rendering

  • useCallback 훅은 컴포넌트가 렌더링될 때마다 새로운 함수를 생성하는 부분을 최적화 해줌 / useCallback 훅은 첫번째 인자로 함수를 받고, 두번째 인자로 의존성 배열을 받는다. -> 의존성 배열이 변경되지 않으면 이전에 생성한 함수를 재사용

  • useMemo 훅은 계산량이 많은 함수의 반환값을 재활용하는 용도로 사용 / useMemo 훅은 첫번째 인자로 받은 함수에서 처리한 반환값을 기억하며, 두번째 인자인 의존성 배열이 변경되지 않으면 이전에 반환된 값을 사용

Reference
https://velog.io/@katanazero86/react-hooks

profile
공부하며 성장하는 사람이 되고 싶은 개발자.

0개의 댓글