👉 useReducer 개념

useReducer란 useState 보다 더 다양한 컴포넌트 상황에서 더 다양한 상태를 다루고 싶을 때 사용하는 훅
현재 상태, 그리고 업데이트를 위해 정보를 담은 액션(Action)의 값을 전달 받아 새로운 상태를 반환하는 함수이다.

1) useReducer 상태관리

• 상태를 업데이트를 하는 방법중 하나
• usestate와 다른 방법

2) useReducer 특징

• 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있다.
• 업데이트 로직을 컴포넌트 바깥에 작성 할 수 있다.
• 다른 파일에 작성한 후 불러와서 사용할 수 있다.

3) useReduce & useState 언제 사용하는가

• 컴포넌트에서 관리하는 값이 딱 하나고, 그 값이 단순한 숫자, 문자열 또는 boolean 값이라면 확실히 useState 로 관리하는게 편하다.
• 만약에 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조가 복잡해진다면 useReducer로 관리하는 것이 편하다.

👉 useReducer 작성법

📝 useReducer선언

const [state, dispatch] = useReducer(reducer, initialState);

state는 현재 상태를 가리키며 dispatch는 액션을 발생시키는 함수이다
useReducer는 첫번째 인자로 reducer 함수를 두번째 인자로 reducer의 기본값을 넣어준다

📝 state 업데이트할 reducer 로직 작성

function reducer(state, action){
  switch(action.type){
    case '1':
      return {};
    case '2':
      return {};
  }
}

• reducer함수의 첫번째 인자인 state는 업데이트 이전의 state이고 useReduer에서 선언 했던 상태를 의미한다. 즉, 선언한 상태 값을 가지고 업데이트가 이루어진다.
• action은 dispatch함수가 발생시키는 action이다. 이 action을 통해서 어떤식으로 state를 업데이트할지 정할수 있다.
• reducer라는 함수 이름은 useReducer선언할 때 reducer 함수와 같아야한다
  
• action은 dispatcher에서 type의 값을 의미한다.

==> 정리

useReducer를 사용할 때의 가장 큰 장점으로는 컴포넌트 업데이트 로직을 컴포넌트 밖에 빼서 모듈화 할 수 있다는데 있다