`React` Redux를 활용한 React 상태 관리

안녕

 

오늘은 리덕스를 사용해 React에서 상태 관리를 어떻게 구현하는지 정리했음

리덕스는 중앙 집중식 상태 관리를 가능하게 해주고 컴포넌트 간에 상태를 공유할 수 있게 해줌

 

 

리덕스 스토어 설정

 

리덕스로 상태 관리를 하려면 스토어를 먼저 설정함

스토어는 애플리케이션의 모든 상태가 저장되는 공간임

import { combineReducers, createStore } from "redux";

// 1) rootReducer: 여러 리듀서를 합치는 부분 (현재는 빈 객체)
const rootReducer = combineReducers({});

// 2) store 조합: rootReducer를 기반으로 스토어 생성
const store = createStore(rootReducer);

// 3) 스토어 export
export default store;

 

리덕스 스토어와 컴포넌트 연결

리덕스 스토어를 사용할 때 <Provider> 컴포넌트로 전체 애플리케이션을 감싸주고

이렇게 하면 모든 하위 컴포넌트가 스토어에 접근할 수 있음

 

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import { Provider } from "react-redux";
import store from "./redux/config/configStore.js";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>
);

 

<Provider> 컴포넌트는 store를 prop으로 받아서 전역적으로 상태를 공유함

 

리듀서 생성

 

리듀서는 상태와 액션을 받아서 새로운 상태를 반환하는 함수임

const initialState = {
  Number: 0,
};

const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter;

현재는 기본 상태만 반환하는 구조이지만

나중에 action.type을 추가해서 상태 변경 로직을 구현할 수 있음

 

상태를 컴포넌트에서 사용

리덕스 상태를 컴포넌트에서 사용하기 위해서는

useSelector 훅을 사용하고 리덕스 스토어의 상태를 조회함

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
  // 리덕스 스토어의 counter 리듀서 상태 조회
  const counterReducer = useSelector((state) => state.counter);
  console.log(counterReducer);
  return <div>App</div>;
};

export default App;

 

useSelector를 통해 state.counter의 상태를 불러옴

 

요약

• 스토어는 리덕스 상태를 저장하고 관리하는 중앙 공간임
• 리듀서는 상태와 액션을 기반으로 새로운 상태를 반환하는 함수임
• <Provider>는 React 애플리케이션에 리덕스 스토어를 공급해줌
• useSelector를 사용하여 스토어의 상태를 컴포넌트에서 조회할 수 있음
  
  

 

마치며

 

리덕스를 기본적으로 설정하고  리덕스 스토어와

React 컴포넌트를 연결하는 방법을 간단하게 정리했습니다.

 

지금까지 useContext를 사용하여 불 필요한 리렌더링을 했어야 했는데

리덕스를 사용하여 더 정교하게 리렌더링을 제어할 수 있을 것 같습니다