React와 Redux로 데이터 관리하기: 기초 예제

 

Redux는 React 애플리케이션에서 전역 상태 관리를 쉽게 해주는 라이브러리입니다. 이번 포스팅에서는 Redux를 React 프로젝트에 통합하고, 간단한 상태 관리를 구현하는 방법을 단계별로 설명하겠습니다.

 

 

 

1. 프로젝트 설정

먼저, Redux와 관련된 패키지를 설치합니다.

 

npx create-react-app redux-example
cd redux-example
npm install redux react-redux @reduxjs/toolkit

 

 

2. Redux 설정

Redux의 상태를 관리하기 위해, @reduxjs/toolkit을 사용하여 간단한 스토어를 설정합니다.

 

import { configureStore, createSlice } from '@reduxjs/toolkit';

// 상태를 관리할 슬라이스 생성
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => {
      state.value += 1;
    },
    decrement: state => {
      state.value -= 1;
    }
  }
});

// 슬라이스에서 액션과 리듀서 추출
export const { increment, decrement } = counterSlice.actions;
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

export default store;

 

 

3. Redux 제공자 설정

Redux 스토어를 React 애플리케이션에 제공하기 위해 Provider를 설정합니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

 

 

4. 컴포넌트 작성

이제 Redux 상태를 사용하는 컴포넌트를 작성합니다. 여기서는 카운터 값을 증가시키고 감소시키는 간단한 예제를 만들겠습니다.

 

Counter.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store';

const Counter = () => {
  // Redux 상태를 선택
  const count = useSelector(state => state.counter.value);
  // 액션 디스패치 함수 생성
  const dispatch = useDispatch();

  return (
    <div>
      <h1>카운터: {count}</h1>
      <button onClick={() => dispatch(increment())}>증가</button>
      <button onClick={() => dispatch(decrement())}>감소</button>
    </div>
  );
};

export default Counter;

 

 

App.js

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Counter />
      </header>
    </div>
  );
}

export default App;

 

 

5. 애플리케이션 실행 및 테스트

위의 모든 설정이 완료되었으면 애플리케이션을 실행하여 결과를 확인합니다.

 

npm start

 

 

브라우저에서 http://localhost:3000에 접속하여 카운터가 정상적으로 작동하는지 확인합니다. "증가" 버튼을 클릭하면 카운터 값이 1씩 증가하고, "감소" 버튼을 클릭하면 1씩 감소하는 것을 확인할 수 있습니다.

결론

이번 포스팅에서는 React 애플리케이션에 Redux를 통합하고, 상태 관리를 구현하는 기본적인 방법을 설명했습니다. Redux를 사용하면 복잡한 상태 관리도 간편하게 처리할 수 있으며, 특히 대규모 애플리케이션에서 유용합니다. 이 예제를 바탕으로 더 복잡한 상태 관리와 기능을 구현해 보세요!

이 포스팅이 도움이 되셨다면, 더 많은 React와 Redux 관련 자료를 확인해 보세요!