1024 TIL-U

_
APT. APT. APT. APT

Section 28 리덕스를 리액트 훅으로 바꾸기

TIL1) Stote로 커스텀 훅 시작하기

리덕스는 상태 관리를 위한 강력한 라이브러리로, 상태의 예측 가능성과 중앙 집중화된 관리 방식이다. 그러나 리액트의 훅을 사용하면 코드가 더 간결하고 직관적으로 변할 수 있다. 따라서 리덕스를 리액트 훅으로 변환하는 작업은 코드베이스의 가독성을 높이고 유지보수성을 향상시키는 중요한 과정이다.

먼저, useReducer 훅을 활용하여 리덕스의 스토어를 커스텀 훅으로 변환하는 방법을 보면, useReducer는 리액트에서 상태 관리를 위한 유용한 훅으로, 상태 변화에 대한 로직을 쉽게 구현할 수 있도록 도와준다.

import { 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 useCustomStore = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return { state, dispatch };
};

위의 코드에서는 useReducer를 사용하여 상태와 디스패치 함수를 반환하는 커스텀 훅을 만들었다. 이제 이 훅을 컴포넌트에서 사용할 수 있.

TIL2) 콘크리트 저장소 만들기

커스텀 훅을 만들었다면, 이제 이를 기반으로 콘크리트 저장소를 구현해보겠다. 여러 컴포넌트에서 상태를 공유할 수 있도록 Context API를 사용할 수 있다.

import React, { createContext, useContext } from 'react';

const StoreContext = createContext();

export const StoreProvider = ({ children }) => {
  const store = useCustomStore();
  return (
    <StoreContext.Provider value={store}>
      {children}
    </StoreContext.Provider>
  );
};

export const useStore = () => {
  return useContext(StoreContext);
};

위의 코드에서는 StoreProvider를 통해 상태를 전역적으로 관리할 수 있도록 Context를 설정했다. 이제 useStore 훅을 통해 언제든지 상태와 디스패치 함수를 사용할 수 있다.

TIL3) 커스텀 훅 스토어 최적화하기

성능을 최적화하기 위해 useMemo와 useCallback을 활용할 수 있다. 불필요한 리렌더링을 방지하고, 상태가 변경될 때만 컴포넌트를 업데이트하도록 할 수 있다.

import { useMemo, useCallback } from 'react';

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

  const value = useMemo(() => ({ state, dispatch }), [state]);

  const increment = useCallback(() => dispatch({ type: 'INCREMENT' }), []);
  const decrement = useCallback(() => dispatch({ type: 'DECREMENT' }), []);

  return { value, increment, decrement };
};

이제 value, increment, decrement를 사용하여 최적화된 상태 관리를 수행할 수 있습니다. 이로써 리덕스를 리액트 훅으로 변환하는 과정이 완료되었다.

추가로 알아볼것

리덕스에서는 미들웨어를 통해 비동기 처리를 쉽게 관리할 수 있는데, useReducer와 Context API로 비동기 액션(예: API 요청)을 처리할 때 어떤 패턴을 사용할 수 있을지

꺄하
11월 1일