Redux Toolkit을 사용하여 상태 관리를 해봅니다!

Redux란?

Redux Toolkit에 대한 설명을 하기 전에 먼저 Redux란 무엇인지에 대해서 알아보겠습니다!

Redux는 자바스크립트 애플리케이션의 상태(State) 관리를 위해 사용되는 오픈 소스 라이브러리입니다. 주로 React와 함께 사용되지만, Angular, Vue.js 등 다른 자바스크립트 프레임워크나 라이브러리와도 함께 사용될 수 있습니다. Redux는 애플리케이션의 상태를 예측 가능한 방식으로 관리할 수 있도록 설계되었습니다.

핵심 개념

• 단일 진실 원천(Single Source of Truth)

  • 애플리케이션의 모든 상태는 하나의 객체 트리 내에 저장되는 단일 스토어(single store)에 의해 관리됩니다. 이로 인해 애플리케이션의 상태를 쉽게 추적하고 디버깅할 수 있습니다.

• 상태는 읽기 전용(State Is Read-Only)

  • 상태를 변경할 수 있는 유일한 방법은 액션(action)을 발생시키는 것입니다. 액션은 상태에 어떤 변화가 필요한지를 설명하는 객체입니다.

• 변화는 순수 함수로 작성(Changes Are Made with Pure Functions)

  • 액션을 처리하여 상태를 변화시키는 로직은 리듀서(reducers)라고 불리는 순수 함수로 작성됩니다. 리듀서는 이전 상태와 액션을 매개변수로 받아 새로운 상태를 반환합니다.

Redux를 사용하는 이유?

그렇다면 Redux를 사용하는 이유는 무엇일까요? React Hooks 중 useState()를 사용해도 상태 관리를 할 수 있는데 말이죠!

Redux를 사용하는 이유와 그 장점을 이해하기 위해서는, 대규모 애플리케이션에서의 상태 관리 복잡성에 대해 먼저 생각해볼 필요가 있습니다. Redux는 이러한 복잡성을 해결하기 위해 고안된 상태 관리 라이브러리입니다.

• 상태의 일관성 유지

  • 단일 스토어를 사용함으로써 애플리케이션의 다양한 부분에서 상태의 일관성을 유지할 수 있습니다. 컴포넌트 간의 상태 공유가 쉬워지며, 상태 업데이트가 애플리케이션 전반에 걸쳐 동일하게 반영됩니다.

• 컴포넌트 리렌더링 최적화

  • Redux는 상태가 변경될 때 필요한 컴포넌트만 리렌더링되도록 할 수 있어, 성능 최적화에 도움을 줍니다.

• 서버 사이드 렌더링

  • Redux는 서버 사이드 렌더링과 잘 통합되어, 초기 페이지 로드 시 서버에서 렌더링된 애플리케이션 상태를 클라이언트에 전달할 수 있습니다.

Redux Toolkit

Redux Toolkit은 Redux 개발 경험을 간소화하고 향상시키기 위해 공식적으로 출시된 도구 세트입니다. Redux를 사용하여 애플리케이션의 상태 관리 코드를 작성할 때 발생하는 반복적이고 복잡한 패턴을 줄이는 데 초점을 맞추고 있습니다.

Redux와 Redux Toolkit의 차이점

Redux

• 상태 관리의 기본 원칙과 패턴을 제공하지만, 상당한 양의 보일러플레이트 코드와 복잡성을 동반할 수 있습니다.
• 액션 타입, 액션 생성자, 리듀서 등을 직접 작성해야 합니다.
• 미들웨어 설정, 스토어 구성 등이 수동으로 이루어집니다.

Redux Toolkit

• Redux의 핵심 개념과 기능을 포함하면서도, 개발자가 보일러플레이트 코드와 복잡성을 줄일 수 있도록 설계되었습니다.
• configureStore(), createAction(), createReducer(), createSlice() 등의 API를 제공하여, 스토어 설정, 액션 및 리듀서 생성을 간소화합니다.
• Immer 라이브러리를 내장하여 불변성 관리를 자동화하고, 리듀서 작성을 간편하게 만듭니다.

결론적으로, Redux Toolkit은 Redux의 기능을 확장하고 개선하여, 보다 쉽고 효율적인 상태 관리 경험을 제공합니다. Redux를 처음 배우는 개발자는 Redux Toolkit으로 입문을 하는 것을 추천하며, 이미 Redux에 익숙한 개발자도 Redux Toolkit으로 넘어가는 것을 추천드립니다!