[React] Hook (훅)

React Hook 이란?

• 함수형 컴포넌트에서 React State와 생명주기 기능(Lifecycle Features)을 연동할 수 있게 해주는 함수이다.
• Hook은 Class형 컴포넌트 안에서는 동작하지 않지만 Class없이 React를 사용할 수 있다.
• Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 해준다.
• Hook을 사용하여 컴포넌트의 상태를 공유하기 쉬워졌다.

Hook을 배우기 전에 알아야할 2가지 규칙

• 반복문이나 중첩된 함수 내에서 Hook을 실행하면 안된다. (최상위 파일에서 훅을 호출해야 한다.)
• 리액트의 함수형 컴포넌트에서만 Hook을 호출해야 한다.

Hook의 등장 배경

• Hook은 Class형 컴포넌트가 가지는 단점을 해결하고자 개발된 것이다.
  
• Class형 컴포넌트의 단점
  • 코드 구성을 어렵게 만든다.
  • 컴포넌트 사이에서 관련된 로직을 재사용하기 어렵다.
  • 복잡한 컴포넌트들을 이해하기 어렵다.

React Hook의 내장 API

기본 Hook

• useState
• useEffect
• useContext

추가 Hook

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue