오늘은 리액트 훅 중 useReducer에 대해서 알아보겠습니다.

useReducer란?

useReducer는 stateful component의 상태관리를 위해서 사용되고 있으며, useState와 함께 가장 많이 사용되는 상태 관리 방법 중 하나입니다. 복작한 상태 로직을 다루는데 도움이 됩니다. 리듀서 함수와 초기 상태를 인자로 받아 상태를 관리합니다. 리듀서 함수는 상태와 액션을 인자로 받아 새로운 상태를 반환합니다.

useReducer의 장점 🔍

useState와 비교했을 때 useReducer는 이런 장점이 있습니다.

• 상태가 복잡할 때 useReducer를 사용하면 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다.
• useReducer를 사용하면 상태를 변경하는 로직을 리듀서 함수로 분리할 수 있습니다.
• useReducer를 사용하면 상태를 변경하는 로직을 테스트하기가 더 쉽습니다.

🎯 useReducer의 기본 구조 및 사용법

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

먼저 이 부분부터 하나하나 분석해 보겠습니다.
여기서 state란 현재 상태를 말합니다.
dispatch는 액션을 전달하는 함수입니다.
reducer는 리듀서 함수이고, initialState는 초기 상태를 말합니다.

이제 리듀서 함수를 작성해보겠습니다.

function reducer(state, action) {
  // 상태를 변경하는 로직을 작성합니다.
  return newState;
}

이런식으로 작성이 됩니다.
useReducer를 사용하면 복잡한 상태를 관리하는 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다. 그리고 상태를 변경하는 로직을 리듀서 함수로 분리할 수도 있어서 상태를 변경하는 로직을 테스트 하기가 더 쉽다는 장점을 가지고 있습니다.

useReduce 함수는 리듀스 함수를 사용하여 리렌더링을 계산하는데 여기서 리듀스 함수는 배열의 요소를 하나의 값으로 줄이는 함수입니다. 리렌더링을 계산할 때 리듀스 함수를 사용하여 배열의 요소를 하나의 값으로 줄이고, 그 값을 setState 함수에 전달하여 리렌더링합니다.

⭐ useReduce 함수의 전체 코드

전체적으로 코드를 작성하면 이렇게 나오겠네요.

import React, { useReducer } from 'react';

// reducer 함수 정의
const reducer = (state, action) => {
  switch (action.type) {
    // 여기에 각 액션에 따른 상태 변경 로직을 작성합니다.
  }
};

const initialState = // 초기 상태를 정의합니다.

const ComponentUsingReducer = () => {
  // useReducer 훅 사용
  const [state, dispatch] = useReducer(reducer, initialState);

  // 컴포넌트 로직 및 JSX 작성
  // state와 dispatch를 이용하여 컴포넌트를 구현합니다.

  return (
    // JSX 반환
  );
};

reducer는 useReducer를 호출할 때 첫 번째 인자로 넘겨지는 함수입니다. state와 action을 받아 새로운 상태를 반환합니다. reducer 함수 내에서 액션의 타입에 따라 상태를 변경하거나 새로운 상태를 하는 로직을 작성합니다. initialState은 아까 위에서 말했던 것 처럼 초기 상태를 정의하고 useReducer의 두 번째 인자로 넘어가집니다. useReducer는 상태와 상태를 업데이트 할 수 있는 dispatch를 반환하고 여기서 useReducer의 첫 번째 인자로는 reducer 함수를, 두 번째 인자로는 초기 상태인 initialState를 전달합니다. state는 useReducer로 호출하여 반환된 배열의 첫 번째 요소로서 사용됩니다. dispatch는 액션을 사용하여 상태를 업데이트할 때 호출되고 호출하여 반환된 배열의 두 번째 요소로서 사용됩니다.

이렇게 해서 useReduce의 전체 코드에 대해 분석해봤습니다.

이것으로 이번 포스팅을 마치겠습니다.