React - useReducer

📍 useReducer 📍

컴포넌트에서 상태 변화 코드를 쉽게 분리할 수 있는 Reack Hook

---

useReducer

• useState와 더불어 리액트 컴포넌트에서 State 를 관리하는 리액트 훅.
• State 관리를 컴포넌트의 내부가 아닌 외부에서 할 수 있게 만든다 .
• useState 와는 달리 State를 관리하는 상태 변화 코드를 컴포넌트와 분리할 수 있다.
  -> 파일로도 분리가 가능하기 때문에 컴포넌트 내부가 훨씬 간결해진다.

상태변화 코드를 컴포넌트 내부에서 분리한다는 것 
= 컴포넌트 내부에 작성했던 상태 변화 코드를 외부에 작성한다는 것.
useState 를 사용해서 state 생성하면 컴포넌트 내에서 선언했기 때문에 
상태변화 코드를 분리할 수 없다. 

상태변화 코드를 분리하는 이유
-> 하나의 컴포넌트 내에 너무 많은 상태 변화 코드가 존재하면 가독성을 해쳐 유지보수를 어렵게 만들기 때문
✨ 결론 : useReducer 를 호출해 useState 처럼 State를 만들 수 있다. ✨

useReducer 사용법

const[count, dispatch] = useReducer (reducer, 0);

매개변수의 정보

reducer

state가 어떻게 업데이트 되는지 지정하는 리듀서 함수. 리듀서 함수는 반드시 순수 함수여야 하며, state와 action을 인수로 받아야 하고, 다음 state를 반환해야 합니다. state와 action에는 모든 데이터 타입이 할당될 수 있습니다.

---

initialArg

초기 state가 계산되는 값임. 모든 데이터 타입이 할당될 수 있으며, 초기 state가 어떻게 계산되는지는 다음 init 인수에 따라 달라진다.

---

선택사항 init

초기 state를 반환하는 초기화 함수입니다. 이 함수가 인수에 할당되지 않으면 초기 state는 initialArg로 설정됩니다. 할당되었다면 초기 state는 init(initialArg)를 호출한 결과가 할당됩니다.

---

✨ 반환값 정보 ✨
useReducer는 2개의 엘리먼트로 구성된 배열을 반환한다.

현재 state. 첫번째 렌더링에서의 state는 init(initialArg) 또는 initialArg로 설정됨. (init이 없을 경우 initialArg로 설정된다).

dispatch 함수
dispatch는 state를 새로운 값으로 업데이트하고 리렌더링을 일으키는 함수

---

import { useReducer } from 'react';

function reducer(state, action) {
  if (action.type === 'incremented_age') {
    return {
      age: state.age + 1
    };
  }
  throw Error('Unknown action.');
}

export default function Counter() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });

  return (
    <>
      <button onClick={() => {
        dispatch({ type: 'incremented_age' })
      }}>
        Increment age
      </button>
      <p>Hello! You are {state.age}.</p>
    </>
  );
}