React와 Redux – 상태 관리 이해하기

byCode Keeper •

React와 Redux – 상태 관리 이해하기


React는 컴포넌트 기반의 프론트엔드 라이브러리로, UI를 효율적으로 구성할 수 있게 해줍니다. 그러나 애플리케이션이 커질수록 컴포넌트 간의 상태 관리를 효율적으로 처리하는 것이 중요해집니다. 이 포스팅에서는 "React Redux", "상태 관리", "React 상태 관리"를 중심으로 Redux를 사용한 상태 관리의 개념과 구현 방법을 설명하겠습니다. 중급 개발자를 대상으로 상세히 설명하고, 예제를 통해 실습해 보겠습니다.


React 상태 관리의 필요성


React는 컴포넌트 단위로 상태를 관리합니다. 단순한 애플리케이션에서는 컴포넌트 내에서 상태를 관리하는 것이 충분하지만, 애플리케이션이 복잡해지면 상태 관리가 어려워질 수 있습니다. 여러 컴포넌트에서 공유하는 상태를 효율적으로 관리하기 위해 Redux와 같은 상태 관리 라이브러리를 사용합니다.


Redux란?


Redux는 자바스크립트 애플리케이션을 위한 상태 관리 라이브러리로, 상태를 중앙 집중식으로 관리할 수 있게 해줍니다. Redux는 상태를 예측 가능하게 만들어 주며, 디버깅과 테스트를 쉽게 할 수 있게 해줍니다.


Redux의 주요 개념


  1. 액션(Actions): 상태에 변경을 일으키는 지시사항입니다. 액션은 타입(type)과 페이로드(payload)를 포함한 객체입니다.
  2. 리듀서(Reducers): 액션을 처리하여 새로운 상태를 반환하는 순수 함수입니다.
  3. 스토어(Store): 애플리케이션의 상태를 저장하는 객체입니다. 스토어는 리듀서와 초기 상태를 포함합니다.
  4. 디스패치(Dispatch): 액션을 스토어에 전달하는 함수입니다.
  5. 구독(Subscribe): 상태 변경을 구독하여 상태가 변경될 때마다 특정 콜백 함수를 실행합니다.

React와 Redux 통합


이제 React 애플리케이션에 Redux를 통합하는 방법을 살펴보겠습니다. 간단한 예제 프로젝트를 통해 Redux를 설정하고 사용하는 방법을 설명하겠습니다.


프로젝트 설정


먼저, 새로운 React 프로젝트를 생성하고 Redux 및 관련 패키지를 설치합니다.


npx create-react-app redux-example
cd redux-example
npm install redux react-redux

Redux 설정


1. 액션(Action) 정의


src/actions 디렉토리를 만들고, index.js 파일을 생성하여 액션을 정의합니다.


// src/actions/index.js

export const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

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

2. 리듀서(Reducer) 정의


src/reducers 디렉토리를 만들고, counterReducer.js 파일을 생성하여 리듀서를 정의합니다.


// src/reducers/counterReducer.js

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

export default counterReducer;

리듀서를 결합하기 위해 src/reducers/index.js 파일을 생성합니다.


// src/reducers/index.js

import { combineReducers } from 'redux';
import counterReducer from './counterReducer';

const rootReducer = combineReducers({
  counter: counterReducer
});

export default rootReducer;

3. 스토어(Store) 생성


src/store.js 파일을 생성하여 스토어를 생성합니다.


// src/store.js

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

React 컴포넌트에서 Redux 사용


이제 Redux를 React 컴포넌트에서 사용하도록 설정합니다.


1. Provider 설정


src/index.js 파일을 수정하여 Redux 스토어를 React 애플리케이션에 연결합니다.


// src/index.js

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

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

2. Redux 상태와 디스패치 연결


src/App.js 파일을 수정하여 Redux 상태와 액션을 연결합니다.


// src/App.js

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

function App() {
  const counter = useSelector(state => state.counter);
  const dispatch = useDispatch();

  return (
    <div className="App">
      <h1>Counter: {counter}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default App;

Redux 개발 도구 설정


Redux 개발 도구는 상태 변경을 시각화하고 디버깅하는 데 유용합니다. Redux 개발 도구를 설정하려면 redux-devtools-extension 패키지를 설치합니다.


npm install redux-devtools-extension

src/store.js 파일을 수정하여 Redux 개발 도구를 설정합니다.


// src/store.js

import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';

const store = createStore(rootReducer, composeWithDevTools());

export default store;

상태 관리 고급 개념


미들웨어(Middleware)


Redux 미들웨어는 액션이 리듀서에 도달하기 전에 가로채서 처리할 수 있는 기능입니다. Redux Thunk와 Redux Saga는 대표적인 미들웨어입니다. 여기서는 Redux Thunk를 사용하여 비동기 작업을 처리하는 방법을 설명하겠습니다.


먼저, redux-thunk 패키지를 설치합니다.


npm install redux-thunk

src/store.js 파일을 수정하여 Redux Thunk를 설정합니다.


// src/store.js

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));

export default store;

비동기 액션을 정의하려면 src/actions/index.js 파일을 수정합니다.


// src/actions/index.js

export const fetchData = () => {
  return async (dispatch) => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();

    dispatch({
      type: 'FETCH_DATA',
      payload: data
    });
  };
};

리듀서를 수정하여 비동기 액션을 처리합니다.


// src/reducers/dataReducer.js

const dataReducer = (state = [], action) => {
  switch (action.type) {
    case 'FETCH_DATA':
      return action.payload;
    default:
      return state;
  }
};

export default dataReducer;

리듀서를 결합합니다.


// src/reducers/index.js

import { combineReducers } from 'redux';
import counterReducer from './counterReducer';
import dataReducer from './dataReducer';

const rootReducer = combineReducers({
  counter: counterReducer,
  data: dataReducer
});

export default rootReducer;

React 컴포넌트에서 비동기 액션을 디스패치합니다.


// src/App.js

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

function App() {
  const counter = useSelector(state => state.counter);
  const data = useSelector(state => state.data);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  return (
    <div className="App">
      <h1>Counter: {counter}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <h2>Data:</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

결론


React와 Redux를 사용하면 애플리케이션 상태를 중앙 집중식으로 관리하고, 상태 변경을 예측 가능하게 만들어 주며, 디버깅과 테스트를 용이하게 할 수 있습니다. 이번 포스팅에서는 Redux의 기본 개념과 React 애플리케이션에 Redux를 통합하는 방법을 설명하였습니다. 또한, Redux 개발 도구와 Redux Thunk를 사용하여 상태 관리의 고급 개념을 다루었습니다. 이러한 지식을 바탕으로 더욱 복잡하고 규모가 큰 애플리케이션을 효율적으로 관리할 수 있습니다.

이 포스팅이 React와 Redux를 이해하는 데 도움이 되길 바랍니다. 질문이나 추가 정보가 필요하시면 언제든지 댓글로 남겨주세요.

Tags:
다음 이전