state 로직을 reducer로 작성하기

리듀서란 무엇인가요?

• 리듀서는 상태(state)의 변화를 처리하는 순수 함수

• 현재 상태와 액션을 인자로 받아 새로운 상태 반환

• 리듀서를 사용하면 복잡한 상태 관리 로직을 더 간단하고 효율적으로 처리 가능

리듀서의 장점

1. 상태 변경 관리 용이: 리듀서가 상태를 변경하는 로직을 일관되게 처리해줌

2. 복잡한 상태 관리: 상태가 여러 개일 때도 리듀서를 사용해 복잡한 상태를 관리할 수 있음

3. 읽기 쉽고 유지보수성 높음: 액션에 대한 처리가 명확하므로 코드가 직관적이고 유지보수하기 용이

---

리듀서 기본 개념

리듀서는 액션을 통해 상태를 변경하며, 이를 통해 복잡한 UI 로직을 관리함!

⇒ 리듀서는 상태를 변경하는 로직을 담당하는 함수

리듀서의 기본 형식

리듀서는 현재 상태와 액션을 매개변수로 받아 새로운 상태를 반환하는 함수

상태를 직접 수정하지 않고, 새 상태 객체를 반환

const initialState = { count: 0 }; // 초기 상태

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 }; // 새로운 상태 반환
    case 'DECREMENT':
      return { ...state, count: state.count - 1 }; // 새로운 상태 반환
    default:
      return state; // 현재 상태 유지
  }
}

리듀서의 기본 흐름

1. 상태 초기화: state는 초기 상태로 설정되거나, 첫 번째 호출 시 기본 값

2. 액션 처리: 액션 타입에 따라 상태가 변경

3. 새로운 상태 반환: 리듀서는 새로운 상태 객체를 반환, 기존 상태는 변하지 않음

React에서 리듀서 사용하기

리듀서를 React에서 사용할 때는 주로 useReducer 훅을 사용

이 훅은 상태를 관리하고, 그 상태를 변화시키는 방법을 리듀서로 지정가능

1.useReducer 사용하기

useReducer는 useState와 비슷하게 상태를 관리하는 훅이지만, 리듀서를 사용하여 상태를 업데이트함

import { useReducer } from "react";

// 리듀서 함수
function counterReducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  // useReducer 훅 사용
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });
//dispatch: 상태 변화가 있음을 알려주는 함수
  return (
    <div>
      <h1>Count: {state.count}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
    </div>
  );
}

• useReducer(reducer, initialState):

  • reducer: 상태 변화를 처리할 리듀서 함수

  • initialState: 초기 상태 값

• dispatch(action): 액션을 리듀서에 전달하여 상태를 변경

useState vs useReducer 비교

비교 항목	useState	useReducer
사용 용도	간단한 상태 관리	복잡한 상태 로직 관리
상태 변경 방식	setState로 직접 변경	dispatch를 통해 액션 기반 변경
코드 구조	상태별로 개별 관리	여러 상태를 하나의 리듀서로 관리
상태 관리 방법	단순 값 또는 객체	액션을 통해 상태 변경

• useState: 간단한 상태를 다룰 때 사용 (예: 입력 값, 토글 상태)

• useReducer: 상태 변경 로직이 복잡할 때 사용 (예: 폼 상태, 여러 상태 관리)

2.상태 변화 트리거

리듀서에서는 상태를 변경하는 액션을 정의

각 액션은 type이라는 속성을 가지며, 상태 변경을 지시

dispatch({ type: 'INCREMENT' });
//dispatch 함수에 넣어준 객체가 action임!

• dispatch를 통해 액션을 보내면, 리듀서가 이 액션을 처리하고 상태를 변경

---

리듀서에서 복잡한 상태 관리

리듀서를 사용하면 여러 상태를 관리할 수 있음!

예를 들어, 복잡한 폼을 관리하거나, 여러 개의 UI 상태를 한 번에 처리할 수 있음

예시: 여러 상태 관리하기

//컴포넌트 외부에 상태 관리 코드를 분리 할 수 있음
function formReducer(state, action) {
  switch (action.type) {
    case 'SET_INPUT':
      return { ...state, inputValue: action.payload };
    case 'SUBMIT':
      return { ...state, isSubmitting: true };
    case 'SUCCESS':
      return { ...state, isSubmitting: false, isSuccess: true };
    case 'ERROR':
      return { ...state, isSubmitting: false, isError: true };
    default:
      return state;
  }
}

function Form() {
  const [state, dispatch] = useReducer(formReducer, {
    inputValue: '',
    isSubmitting: false,
    isSuccess: false,
    isError: false,
  });

  const handleSubmit = () => {
    dispatch({ type: 'SUBMIT' });
    // 서버 요청 후, 응답에 따라 SUCCESS 또는 ERROR 액션을 dispatch
  };

  return (
    <form>
      <input
        value={state.inputValue}
        onChange={(e) =>
          dispatch({ type: 'SET_INPUT', payload: e.target.value })
        }
      />
      <button onClick={handleSubmit} disabled={state.isSubmitting}>
        Submit
      </button>
      {state.isSubmitting && <p>Submitting...</p>}
      {state.isSuccess && <p>Success!</p>}
      {state.isError && <p>Error occurred!</p>}
    </form>
  );
}

상태를 여러 개 관리하는 방식:

1. inputValue: 사용자가 입력한 값

2. isSubmitting: 제출 중 상태

3. isSuccess: 성공적으로 제출되었는지 여부

4. isError: 오류가 발생했는지 여부

리듀서가 각 상태의 변경을 효율적으로 관리

---

리듀서 사용 시 고려할 점

1.상태는 불변성 유지하기

리듀서에서는 상태를 직접 수정하지 않고, 새로운 객체를 반환해야함

기존 상태를 직접 수정하는 대신 복사하여 새로운 상태를 반환하는 방식

// 불변성을 지키는 방식
return { ...state, count: state.count + 1 };

2.액션 타입 관리

리듀서에서 처리할 액션 타입을 관리할 때는, 문자열 상수로 정의하는 것이 좋음

이를 통해 실수를 줄이고, 유지보수성을 높일 수 있음

const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

function counterReducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    case DECREMENT:
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

---

리듀서의 상태 관리 흐름

1. 액션이 dispatch를 통해 리듀서로 전달

2. 리듀서는 액션 타입에 맞는 로직을 실행하여 새로운 상태를 반환

3. 컴포넌트는 리듀서로부터 새로운 상태를 받아 UI를 렌더링

Immer 관련 내용

1. Immer란?

Immer는 불변성을 유지하면서도 가독성 좋은 코드를 작성할 수 있도록 도와주는 라이브러리

일반적으로 객체나 배열의 상태를 변경할 때 spread 연산(...)을 사용해야 하지만, Immer를 사용하면 마치 일반적인 객체를 수정하는 것처럼 작성할 수 있음

2. useReducer + Immer

보통 useReducer를 사용할 때 불변성을 유지하려면 spread 연산자를 많이 사용해야 하지만, Immer를 활용하면 코드를 간결하게 만들 수 있음

Immer를 사용하면 더 간결하게 작성할 수 있음

draft 객체라는 개념을 사용하여 불변성을 유지

draft: state의 불변성을 유지하는 상태를 수정할 수 있는 임시 객체

import { produce } from "immer";

const reducer = (state, action) => {
  return produce(state, (draft) => {
    switch (action.type) {
      case "increment":
        draft.count += 1;
        break;
      case "decrement":
        draft.count -= 1;
        break;
    }
  });
};

⇒ Immer를 사용하면 state를 직접 수정하는 것처럼 보이지만, 내부적으로 불변성을 유지하면서 새로운 state를 생성

내가 헷갈렸던 부분 정리!

1. 리듀서의 역할은 무엇인가요?

   • 리듀서는 상태 변경 로직을 처리하는 함수

   • 현재 상태와 액션을 받아 새로운 상태를 반환

2. useReducer 훅을 언제 사용하나요?

   • 상태 관리가 복잡해지고 여러 상태를 함께 처리할 필요가 있을 때

3. 불변성 유지가 왜 중요한가요?

   • 불변성을 유지하면 상태 변경이 예측 가능하고, React의 효율적인 리렌더링을 보장

4. 액션 타입을 어떻게 관리하나요?

   • 액션 타입은 문자열 상수로 관리하여 실수를 줄이고 유지보수를 용이하게