react redux

13.08.2024 — MYSQL, 2024 — 2 min read

배경

최근 수거 업무 목록을 만들었다 처음 버전은 데이터 리로드시 window.location.reload 로 조회를 시켰고 화면이 번쩍이는 문제가 있었다 또한 목록 상세에 여러 데이터가 필요했고 요소들의 상태관리가 필요했다

개선

reducer 와 dispatch 를 써서 목록 상세 요소를 관리하도록 수정했다

reducer와 dispatch란?

reducer - 상태와 액션을 입력으로 받아 새로운 상태를 반환하는 함수

dispatch - 액션을 reducer에 전달하여 상태를 변경하는 함수

개선 후

아이템의 수량을 변경하거나 목록을 취소하는 작업시 전체 목록을 다시 로드하는 것보다 분적으로만 상태를 업데이트

카운트 예시

import React, { useReducer } from 'react';

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

// 리듀서 함수 예시
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  // useReducer 훅을 사용하여 상태와 dispatch 함수 생성
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h1>카운트: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>증가</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>감소</button>
    </div>
  );
};

export default Counter;

dispatch 함수는 액션 객체를 받아 reducer에 전달하고, 새로운 상태를 반환받아 컴포넌트를 업데이트