본문으로 건너뛰기

Redux 시작하기

비공식 베타 번역

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

Redux는 예측 가능하고 유지보수하기 쉬운 전역 상태 관리를 위한 JavaScript 라이브러리입니다.

Redux는 일관된 동작을 보장하는 애플리케이션 개발을 도와주며, 클라이언트, 서버, 네이티브 등 다양한 환경에서 실행 가능하고 테스트하기 쉽습니다. 무엇보다도 실시간 코드 편집과 타임 트래블 디버거를 결합한 뛰어난 개발자 경험을 제공합니다.

Redux는 React와 함께 사용할 수 있을 뿐만 아니라 다른 뷰 라이브러리와도 호환됩니다. 용량이 작고(의존성 포함 2kB), 다양한 애드온으로 구성된 대규모 생태계를 보유하고 있습니다.

Redux Toolkit은 Redux 로직 작성을 위한 공식 권장 접근 방식입니다. Redux 코어를 감싸는 형태로 제공되며, Redux 애플리케이션 구축에 필수적인 패키지와 함수를 포함합니다. Redux Toolkit은 권장 모범 사례를 내장하여 대부분의 Redux 작업을 단순화하고, 흔한 실수를 방지하며, Redux 애플리케이션 개발을 용이하게 합니다.

RTK에는 스토어 설정, 리듀서 생성 및 불변 업데이트 로직 작성, 상태의 전체 "슬라이스" 생성 등 다양한 일반적인 사용 사례를 단순화하는 유틸리티가 포함되어 있습니다.

첫 프로젝트를 설정하는 Redux 초보자이든 기존 애플리케이션을 간소화하려는 숙련된 사용자이든, **Redux Toolkit**을 통해 Redux 코드를 개선할 수 있습니다.

설치 방법​

Redux Toolkit​

Redux Toolkit은 모듈 번들러나 Node 애플리케이션에서 사용할 수 있는 NPM 패키지로 제공됩니다:

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

새로운 Redux 프로젝트 생성하기​

Redux로 새 애플리케이션을 시작하는 권장 방법은 공식 템플릿 중 하나를 사용하는 것입니다. 이러한 템플릿은 Redux Toolkit으로 사전 구성되어 있으며, 시작하는 데 도움이 될 간단한 예시 애플리케이션이 포함되어 있습니다.

새 프로젝트를 생성하려면 tiged와 같은 도구를 사용하여 템플릿을 복제하고 추출할 수 있습니다.

# Vite + TypeScript
npx tiged reduxjs/redux-templates/packages/vite-template-redux my-app

# Create React App + TypeScript
npx tiged reduxjs/redux-templates/packages/cra-template-redux-typescript my-app

# Create React App + JavaScript
npx tiged reduxjs/redux-templates/packages/cra-template-redux my-app

# Expo + TypeScript
npx tiged reduxjs/redux-templates/packages/expo-template-redux-typescript my-app

# React Native + TypeScript
npx tiged reduxjs/redux-templates/packages/react-native-template-redux-typescript my-app

# Standalone Redux Toolkit App Structure Example
npx tiged reduxjs/redux-templates/packages/rtk-app-structure-example my-app

공식 템플릿 외에도 커뮤니티에서 Next.js with-redux 템플릿과 같은 다른 템플릿을 만들었습니다.

# Next.js + Redux
npx create-next-app --example with-redux my-app

Redux 코어​

Redux 코어 라이브러리는 모듈 번들러나 Node 애플리케이션에서 사용할 수 있는 NPM 패키지로 제공됩니다:

# NPM
npm install redux

# Yarn
yarn add redux

이 패키지는 브라우저에서 직접 <script type="module"> 태그로 사용할 수 있는 사전 컴파일된 ESM 빌드를 포함합니다.

자세한 내용은 설치 가이드를 참조하세요.

기본 예시​

애플리케이션의 전체 전역 상태는 단일 스토어(store) 내부의 객체 트리로 저장됩니다. 상태 트리를 변경하는 유일한 방법은 발생한 사건을 설명하는 객체인 액션(action) 을 생성하고 이를 스토어에 디스패치(dispatch) 하는 것입니다. 액션에 대한 응답으로 상태가 어떻게 업데이트되는지 지정하기 위해, 이전 상태와 액션을 기반으로 새 상태를 계산하는 순수 리듀서(reducer) 함수를 작성합니다.

Redux Toolkit은 Redux 로직 작성 및 스토어 설정 과정을 단순화합니다. Redux Toolkit을 사용하면 기본 애플리케이션 로직은 다음과 같습니다:

import { createSlice, configureStore } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: 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
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

// Can still subscribe to the store
store.subscribe(() => console.log(store.getState()))

// Still pass action objects to `dispatch`, but they're created for us
store.dispatch(incremented())
// {value: 1}
store.dispatch(incremented())
// {value: 2}
store.dispatch(decremented())
// {value: 1}

상태를 직접 변경(mutate)하는 대신, 액션(action) 이라는 일반 객체로 발생할 변경 사항을 명시합니다. 그런 다음 리듀서(reducer) 라는 특수 함수를 작성하여 각 액션이 전체 애플리케이션 상태를 어떻게 변환할지 결정합니다.

일반적인 Redux 앱에서는 단일 스토어(store)와 단일 루트 리듀서(root reducer) 함수로 구성됩니다. 앱이 커짐에 따라 루트 리듀서를 더 작은 리듀서로 분할하여 상태 트리의 다른 부분을 독립적으로 운영할 수 있습니다. 이는 React 앱에서 하나의 루트 컴포넌트가 있지만 수많은 작은 컴포넌트로 구성되는 방식과 유사합니다.

이 아키텍처는 카운터 앱에는 과도해 보일 수 있지만, 이 패턴의 장점은 대규모 복잡한 앱으로 확장성이 우수하다는 점입니다. 또한 모든 변경 사항을 발생시킨 액션으로 추적할 수 있어 강력한 개발자 도구를 가능하게 합니다. 사용자 세션을 기록하고 모든 액션을 재생하기만 하면 재현할 수 있습니다.

Redux Toolkit을 사용하면 동일한 Redux 동작과 데이터 흐름을 유지하면서도 가독성이 높은 간결한 로직을 작성할 수 있습니다.

레거시 예제​

비교를 위해 추상화 없이 작성된 기존 레거시 Redux 구문은 다음과 같습니다:

import { createStore } from 'redux'

/**
 * This is a reducer - a function that takes a current state value and an
 * action object describing "what happened", and returns a new state value.
 * A reducer's function signature is: (state, action) => newState
 *
 * The Redux state should contain only plain JS objects, arrays, and primitives.
 * The root state value is usually an object. It's important that you should
 * not mutate the state object, but return a new object if the state changes.
 *
 * You can use any conditional logic you want in a reducer. In this example,
 * we use a switch statement, but it's not required.
 */
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// You can use subscribe() to update the UI in response to state changes.
// Normally you'd use a view binding library (e.g. React Redux) rather than subscribe() directly.
// There may be additional use cases where it's helpful to subscribe as well.

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}

Redux 배우기​

Redux 학습에 도움이 될 다양한 자료를 제공합니다.

Redux Essentials 튜토리얼​

Redux Essentials 튜토리얼은 최신 권장 API와 모범 사례를 사용해 "올바른 Redux 사용법"을 가르치는 상향식(top-down) 튜토리얼입니다. 여기서 시작하는 것을 권장합니다.

Redux Fundamentals 튜토리얼​

Redux Fundamentals 튜토리얼은 추상화 없이 기본 원리부터 "Redux가 어떻게 작동하는지" 설명하고 표준 Redux 사용 패턴이 존재하는 이유를 다루는 하향식(bottom-up) 튜토리얼입니다.

모던 Redux 실시간 강의​

Redux 메인테이너 Mark Erikson은 "Learn with Jason" 쇼에서 현대적인 Redux 사용법을 설명했습니다. 이 강의에는 Redux Toolkit, React-Redux 훅(Hook), TypeScript와 함께 새로운 RTK Query 데이터 가져오기 API를 사용하는 방법을 보여주는 실시간 코딩 예제 앱이 포함됩니다.

예제 앱 소스 코드와 대본은 Learn Modern Redux 쇼 노트 페이지에서 확인하세요.

추가 튜토리얼​

기타 자료​

도움말 및 토론​

**Reactiflux Discord 커뮤니티**의 **#redux 채널**은 Redux 학습 및 사용 관련 모든 질문을 위한 공식 리소스입니다. Reactiflux는 대화를 나누고 질문하며 배울 수 있는 좋은 장소입니다. 함께해 주세요!

**#redux 태그**를 사용해 Stack Overflow에서도 질문할 수 있습니다.

버그 리포트나 기타 피드백이 필요하시면 Github 저장소에 이슈를 등록해 주세요

Redux를 사용해야 할까요?​

Redux는 상태 관리를 체계화하는 데 유용한 도구이지만, 상황에 적합한지 고려해야 합니다. 누군가 권한다고 해서 무조건 사용하지 마세요. 사용 시 잠재적 이점과 트레이드오프를 이해하는 시간을 가지세요.

다음은 Redux 사용이 합리적인 경우에 대한 제안입니다:

  • 시간에 따라 변경되는 적절한 양의 데이터가 있는 경우

  • 상태에 대한 단일 진실 공급원(Single Source of Truth)이 필요한 경우

  • 최상위 컴포넌트에 모든 상태를 보관하는 방식이 더 이상 충분하지 않다고 느껴지는 경우

Redux 사용 방식에 대한 추가 고민 사항: