React | Redux Toolkit 완전 기초 – createSlice와 .actions 이해하기

Redux Toolkit 완전 기초 – createSlice와 .actions 이해하기

React로 앱을 만들다 보면 여러 컴포넌트에서 데이터를 공유해야 하는 상황이 생깁니다.
예를 들어 로그인 정보, 권한, 현재 선택된 탭 같은 것들 말이죠.
이걸 컴포넌트끼리 props로 일일이 넘기다 보면… 코드가 금방 복잡해집니다.

이 문제를 해결해 주는 게 바로 Redux입니다.
Redux는 전역 상태 저장소(Store)를 만들어서 모든 컴포넌트가 필요한 데이터를 한 곳에서 읽고/쓰게 해줍니다.

 

---

Redux Toolkit으로 간단하게 Store 만들기

요즘은 Redux Toolkit 덕분에 세팅이 훨씬 쉬워졌습니다.
아래는 로그인 상태를 관리하는 authSlice.js 예시입니다.

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

const initialState = {
  isAuth: false,          // 로그인 여부
  userId: '',             // 사용자 ID
  role: '',               // 권한
  allowedTabs: [],        // 접근 가능한 탭 목록
};

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setAuth: (state, { payload }) => {
      state.isAuth = true;
      state.userId = payload.userId;
      state.role = payload.role;
      state.allowedTabs = payload.allowedTabs;
    },
    logout: () => initialState,
  },
});

export const { setAuth, logout } = authSlice.actions;
export default authSlice.reducer;

 

 

참고

• 위 키 이름은 바꾸면 인식되지 않습니다 (reducers가 아닌 myReducers 같은 건 무시됨).
• prepare는 reducers 안 각 항목별로만 쓸 수 있는 서브 키입니다.
• 그 외 configureStore에서 쓰는 reducer, middleware, devTools, enhancers 등은 스토어 설정용 옵션이고 createSlice와는 다릅니다.

createSlice.actions가 뭐길래?

createSlice는 위 reducers 안에 있는 함수들(setAuth, logout)을 보고
자동으로 action creator를 만들어 줍니다.

• authSlice.actions.setAuth(payload) → { type: 'auth/setAuth', payload }
• authSlice.actions.logout() → { type: 'auth/logout' }

즉, authSlice.actions 안에는 이런 “명령서 만드는 함수”들이 들어 있어요.

---

실제 사용 예시

이제 컴포넌트에서 이렇게 쓸 수 있습니다.

import { useDispatch } from 'react-redux';
import { setAuth, logout } from './authSlice';

const LoginButton = () => {
  const dispatch = useDispatch();

  const handleLogin = () => {
    dispatch(setAuth({
      userId: 'jaewon',
      role: 'ADMIN',
      allowedTabs: [{ code: 'main', webLabel: '메인' }]
    }));
  };

  return <button onClick={handleLogin}>로그인</button>;
};

 

dispatch(setAuth(...))
👉 액션 객체 생성 → Redux store에 전달 → authSlice.reducer 실행 → 상태 변경 → UI 리렌더링

---

정리

• reducers: 상태를 어떻게 바꿀지 정의하는 함수들
• authSlice.actions: 위 reducers 이름과 동일한 액션 생성 함수 모음
• dispatch(actions.xxx()): 상태 변경을 실제로 요청하는 단계

Redux Toolkit 덕분에 액션 타입 문자열("AUTH/SET_AUTH")이나 switch-case문을 직접 작성할 필요가 없습니다.
코드가 훨씬 짧고 직관적이죠.

---

팁: 크롬에 Redux DevTools를 설치하면 상태가 어떻게 바뀌는지, 어떤 액션이 발생했는지 한눈에 확인할 수 있어 디버깅이 정말 편해집니다.