https://velog.io/@minw0_o/리액트-hook-총-정리

리액트에서는 16.8 버전부터 훅이라는 개념이 새로 추가되었다. 훅은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해 주는 함수다.

리액트에서 제공하는 내장 훅과 사용자가 직접 정의할 수 있는 커스텀 훅이 있다.

함수형 컴포넌트에 훅이 나오기 전까지는 일반적으론 클래스형 컴포넌트를 많이 사용했지만, 생명주기 메서드를 사용하는 방식은 불편함이 많았다. Class 문법 자체도 어렵고, 복잡한 컴포넌트들의 이해도 어려웠으며, 컴포넌트 간 상태 로직을 재사용하기도 어려웠다. 이 문제들을 해결하기 위해 함수형 컴포넌트의 훅 개념이 등장했다.

Hook 규칙

1. 같은 훅을 여러 번 호출할 수 있다.
2. 컴포넌트 최상위에서만 호출할 수 있다. 반복문, 조건문, 중첩된 함수 내에서 훅을 사용할 수 없다.
3. 훅은 리액트 함수 내에서만 호출할 수 있다.
4. 비동기 함수는 콜백함수로 사용할 수 없다.

• useState - 컴포넌트 상태 관리
• useEffect - 컴포넌트 생애 주기 개입
• useContext - 컴포넌트 간의 전역 상태 관리
• useRef - 컴포넌트나 HTML 엘리먼트를 참조로 관리
• useReducer - 상태 업데이트 로직을 reducer 함수에 따로 분리
• useImperativeHandle - useRef의 참조를 상위 컴포넌트로 전달