React Hook 정리

리액트는 기본적으로 컴포넌트 상태를 관리할 수 있는 useState 와 컴포넌트 생애주기에 개입할 수 있는 useEffect , 컴포넌트 간의 전역 상태를 관리하는 useContext 훅을 제공한다. 추가로 제공하는 Hook은 위 이미지와 같이 기본 Hook의 동작 원리를 모방해서 만들어졌다.

• useReducer
  • 상태 관리를 reducer 함수와 함께 사용할 수 있게 해줌
  • useState 보다 복잡한 상태 전환 로직을 다룰 때 적합
• useRef
  • DOM 요소나 컴포넌트의 인스턴스에 직접 접근할 수 있게 해준다
  • 렌더링 사이에서 값을 유지할 수 있지만 값이 바뀌어도 컴포넌트를 다시 렌더링하지 않음.
  • ex - 포커스 제어, 이전 값 기억 등
• useImperativeHandle
  • forwardRef와 함께 사용하며, 부모가 자식 컴포넌트의 특정 함수나 속성만 제어할 수 있도록 제한한다.
  • 캡슐화를 유지하면서 필요한 메서드만 노출하는 방식
• useMemo
  • 값을 메모이제이션
  • 특정 연산이 불필요하게 다시 실행되는 것을 막음
• useCallback
  • 함수를 메모이제이션
  • 자식 컴포넌트에 함수를 props로 전달할 때, 불필요한 리렌더링을 방지하는데 유용
• useLayoutEffect
  • useEffect와 비슷하지만 DOM업데이트가 끝난 직후, 화면에 그려지기 전에 실행
  • 레이아웃 측정을 하거나, DOM에 동기적으로 변화를 줄 때 사용
  • 성능 문제를 유발할 수 있으므로 꼭 필요한 경우에만 사용
• useDebugvalue
  • 커스텀 훅의 상태를 디버깅할 때 React DevTools에서 표시할 수 있다.
  • 개발자가 내부 상태를 좀 더 쉽게 확인할 수 있도록 도움