본문으로 건너뛰기
비공식 베타 번역

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

Redux Toolkit이란?​

**Redux Toolkit**은 효율적인 Redux 개발을 위한 공식적인, 의견이 포함된(all-in-one) 도구 세트입니다. 이는 Redux 로직 작성을 위한 표준 방식으로 설계되었으며, 저희는 여러분이 이를 사용할 것을 강력히 권장합니다.

이 도구는 스토어 설정, 리듀서 정의, 불변성 업데이트 로직 등 가장 일반적인 Redux 사용 사례를 단순화하는 여러 유틸리티 함수를 포함합니다. 또한 수동으로 액션 생성자나 액션 타입을 작성할 필요 없이 전체 상태 "슬라이스"를 한 번에 생성할 수 있습니다. 비동기 로직을 위한 Redux Thunk나 셀렉터 함수 작성을 위한 Reselect 같은 가장 널리 사용되는 Redux 애드온도 포함되어 있어 바로 사용할 수 있습니다.

설치​

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

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

목적​

Redux 코어 라이브러리는 의도적으로 의견을 포함하지 않습니다(opinionated). 스토어 설정 방법, 상태 구성 방식, 리듀서 작성 방법 등 모든 것을 직접 결정할 수 있도록 합니다.

이는 유연성을 제공한다는 점에서 장점이 있지만, 항상 필요한 것은 아닙니다. 때로는 바로 사용 가능한 합리적인 기본 동작과 함께 시작하는 가장 간단한 방법을 원하기도 합니다. 또는 대규모 애플리케이션을 작성하다 보면 반복적인 코드를 작성하게 되는데, 이러한 수동 작성 코드 양을 줄이고 싶을 수도 있습니다.

Redux Toolkit은 원래 Redux에 대한 세 가지 일반적인 우려를 해결하기 위해 만들어졌습니다:

  • "Redux 스토어 구성이 너무 복잡함"

  • "유용한 기능을 사용하려면 많은 패키지를 추가해야 함"

  • "Redux에는 너무 많은 상용구 코드(boilerplate)가 필요함"

모든 사용 사례를 해결할 수는 없지만, create-react-app과 apollo-boost의 정신을 이어받아 가장 일반적인 사용 사례를 처리하고 추가적인 결정을 줄여주는 공식 권장 도구 세트를 제공할 수 있습니다.

Redux Toolkit을 사용해야 하는 이유​

Redux Toolkit은 권장 모범 사례를 내장함으로써 우수한 Redux 애플리케이션 작성을 용이하게 하고 개발 속도를 높입니다. 좋은 기본 동작을 제공하고, 실수를 잡아내며, 더 간단한 코드 작성을 가능하게 합니다. Redux Toolkit은 기술 수준이나 경험과 관계없이 모든 Redux 사용자에게 유용합니다. 새 프로젝트 시작 시 추가하거나 기존 프로젝트에서 점진적 마이그레이션의 일부로 사용할 수 있습니다.

참고로 Redux를 사용하기 위해 Redux Toolkit을 꼭 사용해야 하는 것은 아닙니다. 다른 Redux 래퍼 라이브러리를 사용하거나 모든 Redux 로직을 "수동으로" 작성하는 기존 애플리케이션도 많습니다. 다른 접근 방식을 선호한다면 그 방식을 사용하셔도 좋습니다!

하지만 모든 Redux 앱에 Redux Toolkit 사용을 강력히 권장합니다.

전반적으로 첫 프로젝트를 설정하는 Redux 초보자이든 기존 애플리케이션을 단순화하려는 경험 많은 사용자이든, Redux Toolkit을 사용하면 코드 품질과 유지 보수성이 향상됩니다.

포함된 기능​

Redux Toolkit에는 다음이 포함됩니다:

  • configureStore(): createStore를 래핑하여 단순화된 구성 옵션과 적절한 기본값을 제공합니다. 슬라이스 리듀서를 자동으로 결합하고, 제공된 Redux 미들웨어를 추가하며, 기본적으로 redux-thunk를 포함하고, Redux DevTools 확장 기능 사용을 가능하게 합니다.

  • createReducer(): switch 문을 작성하는 대신 액션 타입과 케이스 리듀서 함수의 매핑 테이블을 제공할 수 있습니다. 또한 immer 라이브러리를 자동으로 사용하여 state.todos[3].completed = true와 같은 일반적인 변경 코드로 간단한 불변성 업데이트를 작성할 수 있게 합니다.

  • createAction(): 주어진 액션 타입 문자열에 대한 액션 생성자 함수를 생성합니다. 함수 자체에 toString()이 정의되어 있어 타입 상수 대신 사용할 수 있습니다.

  • createSlice(): 리듀서 함수 객체, 슬라이스 이름, 초기 상태 값을 받아 해당 액션 생성자와 액션 타입을 자동으로 생성하는 슬라이스 리듀서를 만듭니다.

  • createAsyncThunk: 액션 타입 문자열과 프로미스를 반환하는 함수를 받아, 해당 프로미스 기반으로 pending/fulfilled/rejected 액션 타입을 디스패치하는 thunk를 생성합니다.

  • createEntityAdapter: 스토어에서 정규화된 데이터를 관리하기 위한 재사용 가능한 리듀서와 셀렉터 세트를 생성합니다.

  • Reselect 라이브러리의 createSelector 유틸리티로, 사용 편의성을 위해 다시 내보내집니다.

Redux Toolkit에는 RTK Query 데이터 페칭 API도 포함되어 있습니다. RTK Query는 Redux 전용으로 구축된 강력한 데이터 페칭 및 캐싱 도구로, 웹 애플리케이션에서 데이터 로딩을 단순화하고 데이터 페칭 및 캐싱 로직을 직접 작성할 필요를 없애줍니다.

문서​

전체 Redux Toolkit 문서는 **https://redux-toolkit.js.org**에서 확인할 수 있습니다.