Redux Toolkit 기본 구조 예제: 실제 애플리케이션 생성부터 실행까지

React/Redux 마스터

Redux Toolkit 기본 구조 예제: 실제 애플리케이션 생성부터 실행까지

atomicdev 2024. 10. 24. 17:15

728x90

이번 포스팅에서는 Redux의 기본 요소인 Action, Reducer, Store를 사용하여 간단한 카운터 기능을 구현해 보겠습니다. 예제를 통해 Redux의 개념을 이해하고, 실제로 실행 가능한 애플리케이션을 만들어보겠습니다.

1. React 애플리케이션 생성 및 Redux 설치

먼저 React 애플리케이션을 생성하고 Redux를 설치합니다.

React 애플리케이션 생성

npx create-react-app redux-counter-app
cd redux-counter-app

Redux 및 React-Redux 설치 Redux와 React-Redux를 설치합니다.
```
npm install redux react-redux
```

2. Action 정의

Action은 상태가 어떻게 변해야 하는지를 나타내는 객체입니다. 증가와 감소를 위한 액션을 정의해 보겠습니다.

src/redux/actions.js 파일을 생성하고 다음과 같이 작성합니다:

// src/redux/actions.js
export const increment = () => {
  return { type: 'INCREMENT' };
};

export const decrement = () => {
  return { type: 'DECREMENT' };
};

3. Reducer 정의

Reducer는 액션에 따라 상태를 변화시키는 함수입니다. 카운터의 기본 값은 0으로 설정하고, INCREMENT와 DECREMENT 액션을 처리하는 리듀서를 정의합니다.

src/redux/reducer.js 파일을 생성하고 다음과 같이 작성합니다:

// src/redux/reducer.js
const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

4. Store 생성

Store는 Redux의 상태를 관리하는 중앙집중식 장소입니다. createStore 함수를 사용하여 스토어를 생성합니다.

src/redux/store.js 파일을 생성하고 다음과 같이 작성합니다:

// src/redux/store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

5. React 컴포넌트에서 Redux 사용하기

React 컴포넌트에서 Redux 스토어와 상호작용하기 위해 Provider를 사용하여 애플리케이션 전체에 스토어를 제공합니다. 그리고 컴포넌트에서 useSelector와 useDispatch 훅을 사용하여 상태를 읽고 업데이트합니다.

src/index.js 파일에서 스토어를 애플리케이션에 제공하도록 수정합니다:

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

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

src/components/Counter.js 파일을 생성하고 카운터 컴포넌트를 작성합니다:

// src/components/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../redux/actions';

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

src/App.js 파일에서 Counter 컴포넌트를 추가합니다:

// src/App.js
import React from 'react';
import Counter from './components/Counter';

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

export default App;

6. 애플리케이션 실행하기

이제 애플리케이션을 실행하여 카운터 기능을 테스트해 봅시다.

npm start

브라우저에서 http://localhost:3000으로 접속하면 간단한 카운터 애플리케이션이 실행됩니다. 증가 및 감소 버튼을 눌러 상태가 변경되는 것을 확인할 수 있습니다.

Redux의 핵심 요소인 Action, Reducer, 그리고 Store의 데이터 흐름

요약

Action: 상태 변경을 나타내는 객체로, type을 정의하여 어떤 변화가 필요한지를 설명합니다.
Reducer: 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다.
Store: 애플리케이션의 상태를 관리하는 중앙 저장소입니다.
React와 Redux 통합: Provider로 스토어를 전체 애플리케이션에 제공하고, useSelector와 useDispatch를 사용하여 상태를 읽고 업데이트합니다.

이 포스팅을 통해 Redux의 기본 요소를 사용해 간단한 카운터 기능을 구현하고, 실제 애플리케이션으로 만드는 과정을 배웠습니다. 추가적인 질문이나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요!

728x90