[React Hooks] useReducer란?

1. useReducer ?

React 내부에는 기본적으로 제공하는 내장 훅 중에 하나이다.

• useState를 대체하는 함수
• 다시말해 useState 처럼 state를 관리하고 업데이트 할 수 있는 Hook
• ⭐️ useReducer는 한 컴포넌트 내에서 state를 업데이트 하는 로직 부분을 해당 컴포넌트로부터 분리시킬 수 있다는 점을 꼭꼭 알아두자 !
  ➡️ state 업데이트 로직을 또 다른 파일에 작성해서 분리시킬 수 있다.
  ➡️ 분리하여 작성한 업데이트 로직을 불러와 사용할 수 있다.

2. useReducer VS useState

🤔 그럼 언제 useState 대신 useReducer를 사용하는 것이 좋을까 ?

• useState

  • 관리하는 state가 1개인 경우
  • 해당 state가 단순한 숫자, 문자열 또는 boolean 값인 경우

• useReducer

  • 관리하는 state가 2개 이상인 경우
  • 스케일이 큰 프로젝트인 경우
  • state의 구조가 복잡해질 것으로 예상되는 경우

3. useReducer의 기본구조

1️⃣ reducer함수 정의

2️⃣ useReducer를 사용하는 과정

4. useReducer을 사용하기 위한 구성요소

1️⃣. useReducer 함수

useReducer 함수는 첫번째 인자인 reducer함수가 반환하는 값으로 state를 갱신하는 역할을 한다.

기본적으로 useReducer는 다음과 같은 형태로 사용된다.

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

• state : 컴포넌트에서 사용할 state
• dispatch : reducer 함수를 실행시키며, 컴포넌트 내에서 state의 업데이트를 일으키기 위해 사용하는 함수
• reducer : 컴포넌트 외부에서 state를 업데이트 하는 로직을 담당하는 함수.
  • 현재 state와 action 객체를 인자로 받아서 , 기존 state를 대체할 새로운 state를 반환(return)하는 함수.
• initialState : 초기 state 값
• init : 초기함수

사용예시

const [number, dispatch] = useReducer (reducer, {count: 0 });

2️⃣. action

action은 업데이트를 위한 📂 정보를 가지고 있는 것.
dispatch의 인자가 되며, reducer 함수의 두번째 인자인 action에 할당이 된다.

• action은 주어진 형태는 없으나 주로 type라는 값을 지닌 객체 형태로 사용된다.

  ex . () => dispatch({type: 'INCREASE'});

3️⃣. dispatch 함수

dispatch 함수는 reducer 함수를 실행시키는 역할을 한다.
dispatch 함수의 인자로써 업데이트를 위한 정보인 action을 사용한다.
컴포넌트 내에서 state의 업데이트를 위해 사용되며 dispatch 함수의 인자인 action은 reducer 함수의 두번째 인자인 action에 해당한다.

<button onClick={() => dispatch({ type: "decrement" })}>-</button>
<button onClick={() => dispatch({ type: "increment" })}>+</button>

4️⃣. reducer 함수

reducer 함수는 dispatch 함수에 의해 실행된다.
컴포넌트 외부에서 state 값을 업데이트 시키는 로직을 담당하고 있다.

useReducer 함수의 첫번째 파라미터로 입력된 reducer 함수는 현재의 state와 action 을 인자로 받게 된다
➡️ 이때 action이 값에 근거하여 기존의 state 값을 대체할 새로운 state를 반환(return)한다.

reducer 함수를 작성할 때에는 switch문을 사용하여 action의 값이 무엇인지에 따라 새로운 state를 반환(return)하고 있다.

사용예제

function reducer(state, action) {
  switch(action.type) {
    case "INCREASE":
      return state +1;
    case "DECREASE":
      return state -1;
    default:
      throw Error('');
  }
}

⭐️ 추가적으로 기억해두기 !

console.log(action) // {type:"INCREASE"}

➡️ action.type = "INCREASE"