Redux(리덕스)

1. 정의

• 전역 상태 관리 라이브러리
• 서로 다른 컴포넌트 간의 상태(값)을 효율적으로 공유

2. 목적

• 전역 상태를 저장하는 Store(저장소) 생성
• 여러 컴포넌트에서 일관성 있는 상태 유지
• 전역 변수처럼 활용

3. 활용처

• 로그인 상태 (비밀번호 X, 단순 로그인 여부만)
• 테마(다크/라이트 모드)
• 자동 로그인 여부
• 사용자 언어 설정, UI 옵션 등

사용하는 상황

• 전역 상태 필요할 때
• 여러 컴포넌트에서 동일한 변수를 공유할 때
• props 전달이 복잡해질 때

4. 핵심 용어

Store (저장소)

• 모든 전역 상태 보관
• configureStore() 사용

Slice

• 상태(state) + Reducer(상태 변경 함수) 정의하는 모듈
• createSlice() 사용

Reducer

• 상태를 실제로 변경하는 함수 (순수 함수)

Action

• 상태 변경 요청 객체
• dispatch(액션함수) 로 전달

5. 실행 흐름

컴포넌트 → dispatch(action) → Reducer → Store → 컴포넌트

6. 코드 예시

(1) store.js : 저장소 만들기

// store.js
import { configureStore } from '@reduxjs/toolkit';
import authSlice from './authSlice';

const store = configureStore({
  reducer: {
    auth: authSlice, // auth 상태 저장
  },
});

export default store;

(2) authSlice.js : 상태 정의 & 변경 함수

// authSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  isAuthenticated: false, // 로그인 여부
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    login(state) {
      state.isAuthenticated = true;  // 로그인 성공
    },
    logout(state) {
      state.isAuthenticated = false; // 로그아웃
    },
  },
});

// 액션과 리듀서 export
export const { login, logout } = authSlice.actions;
export default authSlice.reducer;

(3) main.jsx : 전역 Store 공급

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

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

(4) LoginComponent.jsx : 상태 변경(dispatch)

// LoginComponent.jsx
import React from 'react';
import { useDispatch } from 'react-redux';
import { login, logout } from './authSlice';

export default function LoginComponent() {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(login())}>로그인</button>
      <button onClick={() => dispatch(logout())}>로그아웃</button>
    </div>
  );
}

(5) StatusComponent.jsx : 상태 조회(useSelector)

// StatusComponent.jsx
import React from 'react';
import { useSelector } from 'react-redux';

export default function StatusComponent() {
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);

  return (
    <h3>
      현재 상태 : {isAuthenticated ? "로그인됨 ✅" : "로그아웃됨 ❌"}
    </h3>
  );
}

실행 흐름 예시

1. LoginComponent에서 로그인 버튼 클릭
   → dispatch(login()) 실행

2. authSlice의 login Reducer 실행 → isAuthenticated = true 업데이트

3. store의 상태 변경

4. StatusComponent가 store 상태를 감지하고 UI 업데이트