Redux 설치 및 기본 설정

설치 방법

1. Redux와 Redux Toolkit 설치

npm install @reduxjs/toolkit react-redux

 

2. Redux Store 생성

프로젝트 src 디렉토리에 store 폴더를 만들고 store.js를 만든다.

import { configureStore } from '@reduxjs/toolkit';

// 여기에 slice 추가할 준비
const store = configureStore({
  reducer: {
    // 예: user: userReducer
  },
});

export default store;

 

3. Redux Slice 생성

store 폴더 안에 slices 폴더를 만들고 각 상태 관리를 담당할 slice를 생성한다.

 

4. Store에 Slice 연결 

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice';

const store = configureStore({
  reducer: {
    user: userReducer, // userSlice 추가
  },
});

export default store;

 

5. Redux Store를 React App에 연결 

React에서 Redux를 사용하려면 Provider로 앱을 감싸야 한다.

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

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

 

6. Redux 상태 사용하기

상태 읽기 : useSelector

import { useSelector } from 'react-redux';

function Component() {
  const isFirstLogin = useSelector((state) => state.user.isFirstLogin);

  return <div>Is First Login: {isFirstLogin.toString()}</div>;
}

상태 업데이트 : useDispatch

import { useDispatch } from 'react-redux';
import { completeFirstLogin } from './store/slices/userSlice'; // 경로 맞춰줘

function Component() {
  const dispatch = useDispatch();

  const handleComplete = () => {
    dispatch(completeFirstLogin());
  };

  return <button onClick={handleComplete}>Complete First Login</button>;
}