React-Redux: 상태 관리를 완벽히 이해하기

React 애플리케이션이 커질수록 상태 관리가 점점 더 복잡해집니다.
이때 Redux를 사용하면 상태를 체계적으로 관리할 수 있습니다!
이번 글에서는 React-Redux가 무엇인지, 왜 사용하는지, 어떻게 사용하는지 단계별로 알아보겠습니다. 😊

 

1. Redux란 무엇인가요?

Redux는 JavaScript 애플리케이션의 상태(state)를 관리하기 위한 라이브러리입니다.

• 상태를 한 곳(store)에서 관리
• 데이터 흐름을 예측 가능하게 만듦
• 컴포넌트 간의 데이터 공유를 쉽게 처리

 

2. React-Redux란?

React-Redux는 Redux를 React에서 쉽게 사용할 수 있도록 만들어진 공식 라이브러리입니다.

• React 컴포넌트가 Redux와 통신할 수 있게 해줍니다.
• Redux의 복잡한 작업을 간소화합니다.

 

3. Redux의 3가지 주요 개념

Redux는 세 가지 주요 개념을 중심으로 작동합니다:

1. Store
   • 애플리케이션의 모든 상태를 저장하는 곳입니다.
2. Action
   • 상태에 변화를 요청하는 메시지입니다.
   • 예: 버튼 클릭 시 상태를 업데이트
3. Reducer
   • Action에 따라 상태를 실제로 변경하는 함수입니다.
   • 이전 상태와 액션을 받아 새로운 상태를 반환합니다.

 

4. React-Redux 설치 및 기본 설정

1) 설치

React 프로젝트에 Redux와 React-Redux를 설치합니다:

npm install redux react-redux

 

2) 스토어 생성

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

const initialState = {
  count: 0,
};

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

const store = createStore(counterReducer);

export default store;

 

3) React 애플리케이션에 제공(Provider)

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

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

 

4) 상태를 사용하는 컴포넌트 작성

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector((state) => state.count); // 상태 가져오기
  const dispatch = useDispatch(); // 액션 디스패치

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>증가</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>감소</button>
    </div>
  );
}

export default Counter;

 

5. 실생활 비유로 이해하기

Redux는 도서관!

1. Store → 도서관: 모든 책(상태)이 저장된 곳
2. Action → 도서 대출 요청서: 어떤 책을 빌리고 싶은지 전달
3. Reducer → 사서: 요청서를 보고 실제로 책을 빌려줌

 

React-Redux를 사용하면 애플리케이션 상태를 예측 가능하고 체계적으로 관리할 수 있습니다.
이번 글에서 다룬 예제와 기본 개념을 통해 Redux를 시작해 보세요!