[React] React Hooks

React Hooks

• React Hooks란
  • 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리
  • 반복문, 조건문, 중첩된 함수 내에서 Hook 호출 불가 (리액트 함수 내에서만 호출)
• React의 상태 및 life-cycle 관리
  • 상태 관리 Hooks
    • useState
    • useContext (createContext)
    • useReducer
  • 시점 Hooks
    • useLayoutEffect (render 후)
    • useEffect (pain 후)
  • 메모화 Hooks
    • useMemo
    • useCallback
    • memo
  • 그 외 Hooks
    • useRef, useImperativeHandle
    • useDebugValue, useId
• Hooks의 3 원칙
  • 컴포넌트 영역 안에서만 작동
    • 함수 컴포넌트, 커스텀 훅 내부에서만 호출해야 한다.
  • 기능을 여러 훅으로 나누면 좋다.
    • 나누어 있어도 컴포넌트에서 한번에 순차 호출
    • 함수형 컴포넌트→ 함수→ 기능 단위 분리→ 가독성→ 테스트 및 유지보수에 유리
  • 최상위 레이어에서만 호출해야 한다.
    • 블록 내부에서는 호출 불가