React 공식문서 -useReducer

- useReducer는 컴포넌트에 reducer를 추가할 수 있는 React 훅이다.

- useReducer는 useState와 매우 유사하지만 이벤트 핸들러의 state 업데이트 로직을 컴포넌트 외부의 단일 함수로 옮길 수 있다.

---

State는 읽기 전용입니다. state 객체나 배열을 수정하지 마세요

// 잘못된 예시
function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      // 🚩 Don't mutate an object in state like this:
      state.age = state.age + 1;
      return state;
    }
    
// state의 객체나 배열을 수정하는 대신 새로운 객체를 반환해야 한다.
function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      // ✅ Instead, return a new object
      return {
        ...state,
        age: state.age + 1
      };
    }

 

---

Avoiding recreating the initial state(초기 state 재생성 방지하기)

function createInitialState(username) {
  // ...
}

function TodoList({ username }) {
  const [state, dispatch] = useReducer(reducer, createInitialState(username));
  // ...

- 위 예제에서는 createInitialState(username)의 결과는 초기 렌더링에만 사용되지만, 이후 모든 렌더링에서도 여전히 이 함수를 호출하고 있다.

function createInitialState(username) {
  // ...
}

function TodoList({ username }) {
  const [state, dispatch] = useReducer(reducer, username, createInitialState);
  // ...

- 이 문제를 해결하기 위해서는 위와 같이 useReducer의 세 번째 인수에 초기화 함수 자체를 전달할 수 있고,  이때 초기화 함수는 username을 인수로 받는다.

- 만약 초기화 함수가 초기 state를 계산하는데 아무런 정보가 필요하지 않는 경우, useReducer의 두 번째 인수로 null을 전달할 수 있다.

---

* 참고 : React 공식문서(https://react-ko.dev/learn)