[React] Redux 기본 사용법 : createStore, Provider, userSelector, useDispatch

 

1. createStore로 store 만들기

createStore는 Redux에서 전역 상태 저장소(store)를 만드는 함수.

사용하려면 먼저  reducer 함수가 있어야 한다.

// reducer.js
const 초기값 = { count: 0 };

function counterReducer(state = 초기값, action) {
  switch (action.type) {
    case 'INCREMENT' :
      return { count: state.count + 1 };
    case 'DECREMENT' :
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export default counterReducer;

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

const store = createStore(counterReducer);
export default store;

 

 

 

2. Provider로 store 연결하기

React 앱에서 Redux store를 사용할 수 있도록 하려면 Provider로 앱을 감싸야 한다.

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

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

Provider는 React 앱에 Redux store를 연결해주는 역할을 한다.

이걸로 하위 컴포넌트들이 useSelector, useDispatch를 사용할 수 있게 된다.

 

 

 

3. useSelector : store 값 꺼내쓰기

useSelector는 Redux store에서 값을 읽어오는 데 사용한다.

state에서 필요한 값을 골라서 컴포넌트에서 사용할 수 있다.

// CounterDisplay.js
import React from 'react';
import { useSelector } from 'react-redux';

function CounterDisplay() {
  const count = useSelector((state) => state.count);
  
  return <h1>현재 카운트: {count}</h1>;
}

export default CounterDisplay;

 

 

 

4. useDispatch: 액션 보내기

useDispatch는 store에 액션을 보내서 상태를 변경하고 싶을 때 사용한다.

// CounterButtons.js
import React from 'react';
import { useDispatch } from 'react-redux';

function CounterButtons() {
  const dispatch = useDispatch();
  
  return {
    <div>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>+1</button>
    </div>
  );
}

export default CounterButtons;

 

---

 

🧩 전체 구성 예시

src/
├── reducer.js       # reducer 정의
├── store.js         # store 생성
├── index.js         # Provider로 store 연결
├── App.js
├── CounterDisplay.js
└── CounterButtons.js

 

App.js 예시:

// App.js
import React from 'react';
import CounterDisplay from './CounterDisplay';
import CounterButtons from './CounterButtons';

function App() {
  return (
    <div>
      <CounterDisplay />
      <CounterButtons />
    </div>
  );
}

export default App;