[React / Next] Redux에 관하여 알아보자 - 1. 개념

 

 

[React / Next] Redux에 관하여 알아보자  -  1. 개념

 

 

 

Redux란?

Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리입니다.

주로 React와 같은 UI 라이브러리/프레임워크와 함께 사용되며,

특히 대규모 애플리케이션에서 효과적인 상태 관리를 가능하게 합니다.

Redux를 사용하면 애플리케이션의 모든 상태를 하나의 저장소(store)에 저장하여, 애플리케이션 전체에서 상태를 쉽게 공유하고 관리할 수 있습니다.

 

 

 

 

사용하는 이유?

Redux를 사용하는 주된 이유는 애플리케이션의 상태를 예측 가능하고 효율적으로 관리하기 위함입니다.

복잡한 애플리케이션에서 여러 컴포넌트 간에 상태를 공유하거나,

상태에 따라 다르게 행동해야 할 필요가 있을 때 Redux를 사용하면 큰 도움이 됩니다.

1. 중앙 집중식 상태 관리

Redux는 애플리케이션의 모든 상태를 하나의 중앙 집중식 스토어에서 관리합니다.

이로 인해 어떤 컴포넌트에서든지 동일한 상태에 접근하거나, 상태를 업데이트하고 그 결과를 다른 컴포넌트에서도 반영할 수 있습니다.

중앙 집중식 관리는 상태의 일관성을 유지하고, 데이터 흐름을 명확하게 할 수 있습니다.

 

2. 예측 가능한 상태 변화

Redux의 상태 변화는 단방향으로 정해진 규칙에 따라 일어납니다. (덕분에 데이터 추적이 쉽기 때문에)

모든 상태 변화는 액션을 통해 발생하며, 리듀서라는 순수 함수를 사용하여 새 상태를 생성합니다.

이 과정은 디버깅과 테스트를 용이하게 만들며, 어느 시점에서 어떤 액션이 디스패치되었는지 로깅하거나 추적하기 쉽습니다.

 

3. DevTool의 엄청난 능력 (상태 변화의 확인 / 재현 / 롤백)

Redux DevTools은 Redux로 개발 중에 실시간으로 상태를 확인할 수 있습니다.

상태 변화를 시간 여행하듯이 확인하고, 이전 상태로 롤백할 수 있는 기능을 제공합니다.

테스트, 버그 수정이 필요할 때 매우 유용합니다.

 

4. 유지 보수성

Redux를 사용하면 애플리케이션의 상태 관리 로직을 한 곳에 모아서 관리할 수 있습니다.

이는 크고 복잡한 애플리케이션에서 유지 보수를 보다 쉽게 만듭니다. (데이터 추적이 쉽기 때문에)

액션과 리듀서의 명확한 정의는 개발자가 애플리케이션의 동작을 빠르게 이해하고, 필요한 부분만을 수정할 수 있도록 돕습니다.

 

5. 커뮤니티와 생태계

Redux는 매우 큰 커뮤니티를 가지고 있으며, 다양한 플러그인과 라이브러리가 개발되어 있습니다.

이러한 생태계는 Redux를 사용할 때 많은 자원과 도움을 받을 수 있게 해줍니다.

 

 

 

 

리덕스의 방식?

Redux는 Flux 아키텍처 패턴을 기반으로 구현된 라이브러리입니다.

Flux 패턴의 핵심 개념은 '단방향 데이터 흐름'입니다. Redux에서 이를 적용한 구조는 다음과 같습니다:

1. 액션(Action): 상태를 변경시키는 정보를 담은 객체입니다. 이벤트가 발생하면 디스패치에 태워져서 리듀서로 이동합니다.
2. 디스패치(Dispatch): 액션을 발생시키는 과정입니다. 액션을 리덕스 스토어에 전달하여 상태 변경을 요청합니다.
3. 리듀서(Reducer): 액션을 받아 이전 상태를 새 상태로 변환하는 순수 함수입니다. 모든 상태 변화는 리듀서를 통해 이루어집니다. 여기서 타입과 action 에서 받아온 데이터를 필터해서 새로운 상태로 업데이트 시킵니다.
4. 스토어(Store): 애플리케이션의 상태를 보관하는 객체입니다. 리듀서에서 반환된 새 상태를 저장하며, 애플리케이션의 현재 상태를 조회할 수 있습니다.

이러한 구조는 데이터의 흐름을 명확하게 하여 애플리케이션의 동작을 이해하고 예측하기 쉽게 만들어줍니다.

데이터가 한 방향으로만 흐르기 때문에 복잡한 상호작용이나 대규모 상태 관리에서도 안정성과 유지보수성이 높아집니다.

 

 

 

 

 

그런데 상태 관리 라이브러리가 이것 뿐인가?

상태 관리에 사용될 수 있는 것으로는

리액트의 useReducer & contextApi , redux, mobex 등이 있다.

이런 훅과 라이브러리들은 리덕스와 마찬가지로 중앙데이터 저장소 역할을 해준다.

그러면 이러한 것들 중에서 어떤걸 골라야할까?

분면 취향 차이이고, 프로젝트마다 연구해서 필요한 것을 사용해야 할 것이다.

그러나 보통은

 

1. uesReducer & contextApi

• 소규모 프로젝트 / 토이 프로젝트에 적합
• React의 useReducer와 Context API를 사용할 때, 상태가 변경되면 그 상태를 사용하는 모든 컴포넌트가 리렌더링되는 문제가 발생할 수 있습니다.
• 이는 특히 Context가 애플리케이션 전체에 걸쳐 사용될 때 더욱 두드러지는 문제로, 상태 변화에 따라 관련된 컴포넌트뿐만 아니라 관련 없는 컴포넌트까지 리렌더링 될 수 있습니다.
• 학습 곡선이 낮아서 간단하게 사용할 수 있다.
• 보통 중앙저장소는 서버에서 데이터 많이 받아오기 때문에 항상 데이터 받기/ 실패에 대비해야한다.
  비동기는 보통 3단계 - [데이터 보내줘 요청, 성공해서 받기, 실패]
  이는 컨텍스트 api에서 구현하려면 직접 3단계 구현해야하는 번거로움이 있다. (리덕스, 모벡스에선 구조/도구 제공)

 

2. mobex

• 대규모 프로젝트에 적합
• 리덕스에 비해 코드가 간결하다.
• 하지만 상태 추적은 리덕스에 비해 어렵다.
• 비동기 작업을 효과적으로 처리할 수 있는 구조와 도구를 제공
• 반응형 프로그래밍 모델: MobX는 반응형 프로그래밍 패러다임을 사용하여, 관찰 가능한 상태의 변화를 자동으로 감지하고 이에 의존하는 연산이나 UI를 자동으로 업데이트합니다. 이 접근 방식은 명시적인 상태 변화 관리보다 더 선언적이고 직관적일 수 있습니다.

 

3. redux

• 대규모 프로젝트에 적합
• 모벡스에 비해 코드량이 많아진다.
• 대신 추적이 쉽고 안정적이다.
• 비동기 작업을 효과적으로 처리할 수 있는 구조와 도구를 제공
• 예측 가능한 상태 관리: Redux는 엄격한 단방향 데이터 흐름과 불변성 유지 원칙을 따릅니다. 이는 상태 변화를 매우 예측 가능하게 만들고, 시간 여행 디버깅 등의 고급 기능을 가능하게 합니다.

 

이러한 내용들을 고려해서 선택하면 좋을 것 같다.

나는 안정적인 상태관리, 추적의 용이성, 강력한 devtool을 사용해보고 싶어서 리덕스를 선택하게 되었습니다.