리액트 공부하기 - 리덕스 툴킷

엉엉엉엉 천천히 화이팅

---

리덕스 툴킷은 리덕스를 조금 더 쉽게 사용할 수 있게 만들어진 라이브러리.

최근 공식문서에서도 툴킷을 권장한다.

---

1. 리덕스 툴킷 설치

 

2. 리덕스 툴킷 구성 요소

리덕스 툴킷에서는 createSlice를 통해서 액션, 액션 생성자, 리듀서 같이 만들 수 있고

store 생성은 configureStore()로 ! 나머지는 동일하다.

---

리덕스 툴킷에서의 새로운 기능,

 

3-1. createSlice() 

createSlice() 의 인자로는 "객체" 전달

 

이 객체 안에는 어떤 상태로 만들지의 상태의 "이름", 

상태의 초기값은 어떤것인지, "initial state", 

이 상태의 리듀서는 어떤것인지 "reducer"를 객체 형체로 전달.

  → 이 리듀서 객체 안에는 리덕스의 리듀서에서 스위치문의 비슷한 것처럼 함수를 작성해서 넣으면 됌.

 

🍰 슬라이스(slice)란?

Redux 상태(state) 를 기능별로 잘라놓은 조각이야!
이 조각을 "슬라이스(slice)" 라고 불러!

---

💡 예를 들어볼게!

앱에 이런 기능들이 있다면?

• ✔️ 할 일 관리
• 👍 좋아요 관리
• 👤 로그인 상태 관리

👉 각각을 따로따로 관리하고 싶지?
그래서 할 일 slice, 좋아요 slice, 로그인 slice처럼
기능 단위로 나누는 것이 바로 슬라이스야!

---

🧠 슬라이스 안에는 뭐가 들어있어?

createSlice({
  name: 'like',         // 이 슬라이스의 이름
  initialState: {...},  // 이 슬라이스가 관리할 초기값
  reducers: {           // 상태를 바꾸는 함수들
    ...
  }
})

구성 요소 설명

name	이 슬라이스의 이름
initialState	이 슬라이스에서 관리할 초기 상태값
reducers	상태를 어떻게 바꿀지 정의하는 함수들 (리듀서!)

---

🎯 슬라이스의 핵심 역할은?

• 상태 정의 (state)
• 액션 생성 (action)
• 리듀서 함수 정의 (reducer)
  ➡️ 이걸 createSlice() 하나로 전부 만들 수 있어!

---

📦 왜 이렇게 나눠?

• 관리하기 쉽고,
• 협업도 편하고,
• 코드도 훨~씬 깔끔해져!

 

3-2. configureStore()

 : 리듀서를 전달받아서 저장소 생성 = 리덕스의 createStore()와 동일

호출할 때 인자 : 객체 형태로 전달.

- 이 객체 안에는 리듀서라는 키를 가지고 그 안에 리듀서 전달

- 리듀서가 여러개라면 ? 리덕스 처럼 따로 합칠 필요 없이, 그냥 리듀서 다 쓰면 된다.

 

 

→리덕스 툴킷은 리덕스에 비해 조금 더 간단하다. 하지만, flux 패턴 파악은 다소 힘듬

 

리덕스의 구성 요소가 만들어졌으니까, 액션을 만들었으니까, 디스패치로써 리듀서에 전달!

creatSlice로 만들어진 액션 생성자로(increment, decrement)를 디스패치에 전달 해주면 된다.

 

4. 리덕스 툴킷에서의 비동기

따로 설치 없이, 리덕스 툴킷에 내장되어 있다.

---

리덕스 툴킷(Redux Toolkit) 

→ "리덕스를 더 편하게 쓰게 해주는 도구"야.

원래 리덕스는:

• 코드가 길고
• 반복이 많고
• 사용하기 귀찮았어.

**리덕스 툴킷(RTK)**은 그런 복잡함을 줄이고, 짧고 쉽게 **상태(state)**를 관리할 수 있게 도와줘.

---

기본 문법 

1. configureStore

→리덕스 store를 쉽게 만드는 함수

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  reducer: {
    // 여기에 리듀서들을 모아 넣어!
    counter: counterReducer,
    user: userReducer,
  },
})

예전에는 createStore 써야 했는데 이제 configureStore 하나로 끝!

---

2. createSlice

→ action + reducer를 한번에 만드는 함수

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter', // slice 이름
  initialState: { value: 0 }, // 기본값
  reducers: {
    increment: (state) => { state.value += 1 },
    decrement: (state) => { state.value -= 1 },
    incrementByAmount: (state, action) => { state.value += action.payload },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

즉, 액션 만들고, 리듀서 따로 만들 필요 없어! 한 번에!

---

3. 리덕스 흐름

• store 만든다 (configureStore)
• slice 만든다 (createSlice)
• 컴포넌트에서 useSelector로 가져오고, useDispatch로 실행한다.

import { useSelector, useDispatch } from 'react-redux'
import { increment } from './counterSlice'

function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>+</button>
    </div>
  )
}

---

정말 꼭 알아야 할 것들만 요약 

개념 쉽게 말하면

configureStore	store 쉽게 만들기
createSlice	reducer + actions 쉽게 만들기
useSelector	store 안에서 값 꺼내오기
useDispatch	액션 보내기 (버튼 클릭 등)
action.payload	액션 보낼 때 추가 데이터

---

추가로 알아두면 좋은 것

(필수는 아니지만 나중에 필요해!)

• async thunk: 비동기 작업 (API 호출) 쉽게 할 때
• middleware 추가: 예를 들면 로깅 기능 넣고 싶을 때
• immer: 리덕스 툴킷 안에 내장, 그래서 state를 "직접 수정"하는 것처럼 코드 써도 된다.

---

요약 한 줄:

리덕스 툴킷은 slice로 나누고, store에 넣고, dispatch해서 쓴다!

---

 

---

툴킷 사용 예제

✓ 전체 순서

❶ 좋아요 숫자를 저장할 slice 만들기
❷ store 만들기
❸ 컴포넌트에서 state 가져오기 + 버튼 클릭으로 숫자 올리기

---

🧩 1. likeSlice.js

// 좋아요 상태를 저장하는 파일
import { createSlice } from '@reduxjs/toolkit'

// slice 생성
const likeSlice = createSlice({
  name: 'like', // 이름
  initialState: { count: 0 }, // 초기값
  reducers: {
    // count를 1 증가시키는 함수
    addLike: (state) => {
      state.count += 1
    },
  },
})

// 액션과 리듀서 export
export const { addLike } = likeSlice.actions
export default likeSlice.reducer

---

🏗️ 2. store.js

import { configureStore } from '@reduxjs/toolkit'
import likeReducer from './likeSlice'

// store 만들기
const store = configureStore({
  reducer: {
    like: likeReducer,
  },
})

export default store

---

🖇️ 3. index.js

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

// store를 앱에 연결
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

---

🖥️ 4. App.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { addLike } from './likeSlice'

function App() {
  const count = useSelector((state) => state.like.count) // 상태 불러오기
  const dispatch = useDispatch() // 액션 보내기 준비

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h2>👍 좋아요: {count}</h2>
      <button onClick={() => dispatch(addLike())}>좋아요 누르기</button>
    </div>
  )
}

export default App

---

💬 실행하면 이렇게 돼!

• 화면에 👍 좋아요: 0 표시됨
• 버튼 누를 때마다 1, 2, 3... 숫자 올라감
• 리덕스 툴킷으로 상태를 관리함!

---

Jane을 위한 요약! 💡

개념 설명

createSlice	상태 + 함수 같이 만들기
configureStore	모든 상태(store) 모으기
useSelector	값을 꺼내서 화면에 보여주기
useDispatch	버튼 누르면 액션 보내기

---

 

---

출처 : 챗지피티, 오즈코딩스쿨 학습자료, 공식문서, 구글링