Redux 마스터(2): Redux 설치 및 기본 사용법

Redux 설치 및 기본 사용법

이번 단계에서는 Redux를 React 프로젝트에 설치하고, 간단한 예제를 통해 Redux의 동작 방식을 알아보겠습니다. Redux를 사용해 Store를 생성하고, Action과 Reducer를 설정한 후, 상태를 업데이트하는 방법을 배워봅니다.

Redux를 React 프로젝트에 사용하는 기본 구조

---

1. Redux 설치

우선 Redux와 React와의 연결을 돕는 react-redux 패키지를 설치해야 합니다. 이를 통해 Redux Store와 React 컴포넌트를 연결할 수 있습니다.

설치 명령어:

npm install redux react-redux

 

---

2. Redux 기본 사용법

Redux는 세 가지 핵심 요소로 작동합니다: Action, Reducer, Store. 이 세 가지 요소를 설정하고 React와 연결하는 방법을 단계별로 살펴보겠습니다.

---

3. 스토어(Store) 생성

스토어는 애플리케이션의 모든 상태를 중앙에서 관리합니다. Redux의 createStore 함수를 사용하여 스토어를 생성합니다.

import { createStore } from 'redux';

// 초기 상태
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;
  }
};

// 스토어 생성
const store = createStore(counterReducer);

console.log(store.getState()); // { count: 0 }

• 초기 상태: 상태의 초기값을 설정합니다.
• 리듀서: Action에 따라 상태를 업데이트하는 함수입니다.
• createStore: Redux 스토어를 생성하는 함수입니다.

---

4. Action 정의 및 상태 변경

Action은 상태를 업데이트할 때 어떤 종류의 상태 변화를 일으킬지 명시하는 객체입니다. dispatch 함수를 사용해 Action을 스토어에 전달하면, Reducer가 Action에 따라 상태를 업데이트합니다.

Action 예시:

// Action 생성 함수
const increment = () => {
  return { type: 'INCREMENT' };
};

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

// 상태 변경 테스트
store.dispatch(increment()); // { count: 1 }
store.dispatch(increment()); // { count: 2 }
store.dispatch(decrement()); // { count: 1 }

---

5. React와 Redux 연결하기

Redux와 React를 연결하려면 react-redux 라이브러리의 Provider 컴포넌트를 사용하여 Redux 스토어를 React 컴포넌트 계층에 제공해야 합니다.

Provider 설정:

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')
);

 

이제 Redux 스토어가 React 애플리케이션의 모든 컴포넌트에서 접근 가능하게 되었습니다.

---

6. Redux 상태를 React 컴포넌트에서 사용하기

React 컴포넌트에서 Redux 상태를 사용하려면 useSelector와 useDispatch 훅을 사용합니다. useSelector는 Redux 스토어에서 상태를 읽어오고, useDispatch는 Action을 디스패치하여 상태를 업데이트합니다.

카운터 컴포넌트 예시:

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

function Counter() {
  const count = useSelector(state => state.count); // 상태 값 선택
  const dispatch = useDispatch(); // 액션 디스패치

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

export default Counter;

• useSelector: Redux 스토어에서 상태를 읽어오는 데 사용.
• useDispatch: Redux Action을 디스패치하는 데 사용.

---

7. 전체 코드 구조

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

// 초기 상태
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 const store = createStore(counterReducer);

// actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });

// Counter.js (컴포넌트)
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

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

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

export default Counter;

// 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')
);

---

결론

이 단계에서는 Redux를 설치하고, 기본적인 스토어 생성, Action 및 Reducer 설정, 그리고 이를 React 애플리케이션에 연결하는 방법을 배웠습니다. 간단한 카운터 예제를 통해 Redux가 상태 관리를 어떻게 처리하는지 살펴봤습니다. 이제 다음 단계에서 React와 Redux를 더욱 긴밀하게 연동하고, 비동기 작업을 처리하는 방법을 배울 것입니다.