Redux 마스터(3): React와 Redux 연동하기

React와 Redux 연동하기

이번 단계에서는 React와 Redux를 연동하여 애플리케이션에서 전역 상태 관리를 하는 방법을 배웁니다. 이를 위해 React-Redux 라이브러리의 훅인 useSelector와 useDispatch를 사용하여 Redux의 상태를 읽고 업데이트하는 방법을 알아보겠습니다.

React와 Redux의 연동

---

1. React-Redux 라이브러리 설치

React 애플리케이션에서 Redux 상태를 사용하려면 react-redux 패키지를 설치해야 합니다.

설치 명령어:

npm install react-redux

 

설치가 완료되면, Redux와 React를 연결할 준비가 된 것입니다.

---

2. Redux Store를 React와 연결

Provider 컴포넌트를 사용해 Redux Store를 React 애플리케이션에 제공합니다. Provider는 애플리케이션 전체에 Redux 상태를 전달하는 역할을 합니다.

index.js 파일:

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

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

 

위 코드를 통해 React 애플리케이션의 최상위에 Redux Store를 연결했습니다. 이제 React 컴포넌트 내에서 Redux 상태를 사용할 수 있습니다.

---

3. Redux 상태를 React 컴포넌트에서 읽기: useSelector

useSelector 훅을 사용하면 Redux 스토어에서 상태를 읽어올 수 있습니다. 상태를 읽어오기 위해서는 useSelector를 사용하여 원하는 상태 값을 선택하면 됩니다.

Counter.js 파일:

import React from 'react';
import { useSelector } from 'react-redux';

function Counter() {
  // Redux 스토어에서 count 상태를 선택
  const count = useSelector(state => state.count);

  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
}

export default Counter;

 

• useSelector: Redux Store에서 상태를 선택하여 React 컴포넌트에서 사용할 수 있습니다. 위 예시에서는 state.count 값을 가져와 화면에 표시합니다.

---

4. Redux 상태 업데이트: useDispatch

Redux 상태를 변경하려면 useDispatch 훅을 사용해야 합니다. dispatch는 Action을 트리거하여 Reducer를 통해 상태를 변경합니다.

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(); // dispatch 함수 가져오기

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

export default Counter;

• useDispatch: Action을 디스패치하여 Redux Store의 상태를 변경하는 데 사용합니다.
• dispatch(increment()): increment 액션을 디스패치하여 상태를 1 증가시킵니다.
• dispatch(decrement()): decrement 액션을 디스패치하여 상태를 1 감소시킵니다.

---

5. 전체 코드 구조

다음은 React와 Redux를 연동한 전체 예제 코드입니다. 이 코드에서는 Redux 스토어를 사용해 상태를 관리하고, 상태를 컴포넌트에서 읽고 업데이트하는 방법을 보여줍니다.

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

 

---

결론

이 단계에서는 React와 Redux를 연동하는 방법을 배웠습니다. Redux Store를 생성하고, Provider를 사용하여 애플리케이션에 연결한 후, useSelector와 useDispatch를 사용해 상태를 읽고 업데이트하는 방법을 익혔습니다. 이 구조를 통해 React 애플리케이션에서 효율적으로 상태를 관리할 수 있습니다.