비공식 베타 번역

이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →

Redux Toolkit 빠른 시작

학습 내용

React-Redux와 함께 Redux Toolkit 설정 및 사용 방법

필수 조건

ES6 문법 및 기능에 대한 이해
React 용어 숙지: JSX, 상태, 함수 컴포넌트, Props, 훅
Redux 용어 및 개념 이해

소개

Redux Toolkit 빠른 시작 튜토리얼에 오신 것을 환영합니다! 이 튜토리얼은 Redux Toolkit을 간략히 소개하고 올바르게 사용하는 방법을 알려드립니다.

튜토리얼 활용 방법

이 페이지는 Redux Toolkit을 사용한 Redux 애플리케이션 설정 방법과 주요 API 사용법에 집중합니다. Redux의 개념, 작동 방식, Redux Toolkit 사용 예시는 튜토리얼 인덱스 페이지의 링크를 참조하세요.

본 튜토리얼에서는 React와 함께 Redux Toolkit을 사용한다고 가정하지만, 다른 UI 레이어에서도 사용할 수 있습니다. 예시는 모든 애플리케이션 코드가 src 폴더에 있는 전형적인 Create-React-App 폴더 구조를 기반으로 하지만, 프로젝트 설정에 맞게 적용할 수 있습니다.

Create-React-App용 Redux+JS 템플릿은 동일한 프로젝트 설정이 미리 구성된 상태로 제공됩니다.

사용법 요약

Redux Toolkit 및 React-Redux 설치

프로젝트에 Redux Toolkit과 React-Redux 패키지를 추가하세요:

npm install @reduxjs/toolkit react-redux

Redux 스토어 생성

src/app/store.js 파일을 생성합니다. Redux Toolkit에서 configureStore API를 임포트하고, 빈 Redux 스토어를 생성한 후 내보냅니다:

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

export default configureStore({
  reducer: {}
})

이렇게 하면 Redux 스토어가 생성되고, 개발 중에 스토어를 검사할 수 있도록 Redux DevTools 확장 프로그램도 자동으로 구성됩니다.

Redux 스토어를 React에 제공

스토어 생성 후, src/index.js에서 React-Redux의 <Provider>로 애플리케이션을 감싸서 React 컴포넌트에서 사용할 수 있게 합니다. 생성한 Redux 스토어를 임포트하고, <App>을 <Provider>로 감싼 후 스토어를 prop으로 전달하세요:

index.js
import React from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

const root = createRoot(document.getElementById('root')!)

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

Redux 상태 슬라이스 생성

src/features/counter/counterSlice.js 파일을 추가합니다. 이 파일에서 Redux Toolkit의 createSlice API를 임포트하세요.

슬라이스 생성에는 슬라이스를 식별할 문자열 이름, 초기 상태 값, 상태 업데이트 방법을 정의할 하나 이상의 리듀서 함수가 필요합니다. 슬라이스가 생성되면 생성된 Redux 액션 생성자와 전체 슬라이스의 리듀서 함수를 내보낼 수 있습니다.

Redux는 데이터 복사본을 만들어 업데이트하는 불변성 방식으로 모든 상태 업데이트를 작성해야 합니다. 그러나 Redux Toolkit의 createSlice 및 createReducer API는 내부에서 Immer를 사용하여 "변경"처럼 보이는 업데이트 로직을 올바른 불변성 업데이트로 변환합니다.

features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

슬라이스 리듀서를 스토어에 추가

다음으로 카운터 슬라이스에서 리듀서 함수를 가져와 스토어에 추가해야 합니다. reducer 매개변수 내부에 필드를 정의함으로써, 해당 상태의 모든 업데이트를 처리하기 위해 이 슬라이스 리듀서 함수를 사용하도록 스토어에 지시합니다.

app/store.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

React 컴포넌트에서 Redux 상태와 액션 사용하기

이제 React-Redux 훅을 사용해 React 컴포넌트가 Redux 스토어와 상호작용할 수 있습니다. useSelector로 스토어에서 데이터를 읽고, useDispatch로 액션을 디스패치할 수 있습니다. <Counter> 컴포넌트가 포함된 src/features/counter/Counter.js 파일을 생성한 후, 이 컴포넌트를 App.js로 가져와 <App> 내부에 렌더링하세요.

features/counter/Counter.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'

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

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

이제 "증가(Increment)" 및 "감소(Decrement)" 버튼을 클릭할 때마다:

해당 Redux 액션이 스토어로 디스패치됩니다
카운터 슬라이스 리듀서가 액션을 인식하고 상태를 업데이트합니다
<Counter> 컴포넌트가 스토어에서 새로운 상태 값을 가져와 새 데이터로 리렌더링됩니다

학습 내용 요약

지금까지 React와 함께 Redux Toolkit을 설정하고 사용하는 방법에 대한 간략한 개요였습니다. 주요 내용을 정리해 보겠습니다:

요약

configureStore로 Redux 스토어 생성
- configureStore는 reducer 함수를 명명된 인수로 받습니다
- configureStore가 자동으로 최적의 기본 설정으로 스토어를 구성합니다
React 애플리케이션 컴포넌트에 Redux 스토어 제공
- <App />을 React-Redux <Provider> 컴포넌트로 감싸세요
- <Provider store={store}> 형태로 Redux 스토어를 전달하세요
createSlice로 Redux "슬라이스" 리듀서 생성
- 문자열 이름, 초기 상태, 명명된 리듀서 함수로 createSlice를 호출하세요
- 리듀서 함수는 Immer를 사용해 상태를 "변경(mutate)"할 수 있습니다
- 생성된 슬라이스 리듀서와 액션 생성자를 내보내세요
React 컴포넌트에서 React-Redux useSelector/useDispatch 훅 사용
- useSelector 훅으로 스토어에서 데이터를 읽으세요
- useDispatch 훅으로 dispatch 함수를 가져오고 필요시 액션을 디스패치하세요

전체 카운터 앱 예제

실행 가능한 CodeSandbox로 전체 카운터 애플리케이션을 확인하세요:

다음 단계

Redux Toolkit에 포함된 모든 주요 기능, 그것들이 해결하는 문제, 그리고 실제 애플리케이션을 구축하는 방법을 다루는 전체 "Redux Essentials" 튜토리얼을 진행해 보는 것을 권장합니다.

또한 Redux의 작동 방식, Redux Toolkit이 하는 일, 그리고 올바른 사용법을 완전히 이해할 수 있도록 "Redux Fundamentals" 튜토리얼을 읽어보는 것도 좋습니다.

소개​

튜토리얼 활용 방법​

사용법 요약​

Redux Toolkit 및 React-Redux 설치​

Redux 스토어 생성​

Redux 스토어를 React에 제공​

Redux 상태 슬라이스 생성​

슬라이스 리듀서를 스토어에 추가​

React 컴포넌트에서 Redux 상태와 액션 사용하기​

학습 내용 요약​

전체 카운터 앱 예제​

다음 단계​

소개