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

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

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

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

1. React 애플리케이션 생성

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

   
   
2. 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 훅을 사용하여 상태를 읽고 업데이트합니다.

1. 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>
   );

2. 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;

3. 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 Counter 실행화면

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

요약

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

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