클래스 컴포넌트를 대체하기 위해 함수형 컴포넌트에서 클래스 컴포넌트가 수행하던 역할을 수행하기 위해 나타난 개념

Hook 사용 규칙

1. 최상위(at the top level)에서만 Hook 을 호출해야 한다

   • 반복문, 조건문, 중첩된 함수 내에서 Hook 을 실행하지 않는게 좋음

2. React 함수 컴포넌트 내에서만 Hook 을 호출해야 한다

   • 일반 JavaScript 함수에서 호출하면 안됨
   • 그외 Hook 을 호출할 수 있는 곳은 직접 작성한 custom Hook 안에서는 가능

useState & useEffect

• useState 로 간편하게 state 를 만들고 리렌더링
• useEffect 로 기존의 클래스 컴포넌트에서의 componentDidMount, componentDidUpdate, componentWillUnmount 를 대체함

커스텀 훅(Custom Hooks)

커스텀 훅이란 여러 훅을 조합해 재사용될 훅을 다시 만들어내는 것

• useReducer() 훅
  
  한번에 보다 다양한 state 를 변경해야 할 때 useReducer() 훅은 굉장히 유용함
• useReducer() 훅의 인자로는 reducer 함수와 state 초기화 상태가 들어오게 됨
• useReducer(reducer, initialState) 의 결과로는 배열이 오고,
  • 첫 번째 인자는 바로 그 초기화된 state 가 오고,
  • 두 번째 인자는 이 state 를 변경하는 dispatch 함수가 들어옴
• 실행을 할 때는 dispatch() 함수 안에 type 이 담긴 객체를 전달하고,
• 그 타입별로 어떻게 state 를 전달할 것인지에 대해서 reducer 함수 안에 정의해놓음