[Redux] Redux를 왜 사용해야 할까? Redux(리덕스)란?

Redux란? Redux 사용이유

📖 들어가며

React를 처음 학습하던 시절, Redux가 무엇인지, 그리고 왜 필요한지에 대한 명확한 이해 없이 'Redux를 왜 배워야 하는지'에 대해 의문을 갖곤 했습니다.

 

하지만, React를 이용하여 클론 코딩을 하거나 실제 프로젝트를 진행하면서 데이터를 사용하고자 하는 컴포넌트가 멀리 떨어져 있어 자식 컴포넌트에게 불필요하게 많은 Props를 전달해야 하는 상황(Props Driling)을 겪게 되었습니다.

 

이런 경험을 통해 "전역 상태 관리"의 필요성을 체감하게 되었습니다.

 

그래서 이번 포스팅에서는 Redux에 대해 알아보려 합니다.

Redux란 ❓

Redux는 JavaScript 애플리케이션의 상태를 효과적으로 관리하는 데 도움을 주는 라이브러리입니다.

Redux는 React와 함께 사용되는 경우가 많지만, Redux와 React는 완전히 별개의 개념입니다.
Angular, Vue.js, Vanilla JavaScript 등 다른 JavaScript 프레임워크나 라이브러리에서도 사용할 수 있습니다.

기존 MVC 패턴

React에서는 state를 통해 데이터를 관리할 수 있지만, Redux가 등장하기 전에는 프론트엔드의 데이터 흐름을 관리하는 주된 방식은 MVC(Model-View-Controller) 패턴이었습니다.

MVC 패턴

MVC 패턴에서는 데이터가 변경되면, 관련된 모든 View, Model, Controller에 이벤트가 발생하고, 이는 데이터 흐름을 파악하기 어렵게 만드는 문제를 불러왔습니다.

이 원인은 '양방향 데이터 흐름'때문입니다.

Flux 패턴 등장

Flux 패턴

Flux는 Facebook이 개발한 애플리케이션 아키텍처 중 하나로, 클라이언트-사이트 웹 애플리케이션을 구축하기 위한 패턴입니다.

 

Flux는 MVC 패턴과는 달리 데이터가 단방향으로 흐르는 패턴을 사용하고 있습니다.

 

크게 4가지 주요 구성 요소로 이루어져 있습니다.

• Action: 데이터를 담고 있는 자바스크립트 객체입니다. 이 객체는 애플리케이션에서 데이터가 변화할 때마다 생성됩니다.
• Dispatcher: 모든 데이터 흐름을 관리하는 중앙 허브 역할을 합니다. Action이 발생하면, Dispatcher는 이를 모든 Store에 전달합니다.
• Store: 애플리케이션의 상태와 로직을 관리합니다. MVC의 Model과 유사하지만, 여러 개의 Store를 가질 수 있으며 각 Store는 독립적입니다.
• View: 사용자에게 보이는 부분으로, Store에서 상태를 가져와 렌더링 합니다. Store의 상태가 변경되면 View는 이를 감지하고 다시 렌더링합니다.

Flux 패턴은 이렇게 단방향 데이터 흐름을 통해 애플리케이션 내에서 데이터가 어떻게 처리되고 변화하는지를 명확하게 파악할 수 있게 합니다.

Redux 등장

Redux는 Flux 패턴의 아이디어를 기반으로 하여 개발되었고, Flux의 복잡성을 줄이면서 개발자가 애플리케이션의 상태를 더 쉽게 관리할 수 있도록 도와줍니다.

 

이렇게, 프로젝트가 커지면서 데이터 흐름을 제어하는 과정이 복잡해지는 문제를 해결하기 위해, '단방향 데이터 흐름'을 제공하는 Redux가 등장하게 되었습니다.

 

Redux를 사용하면 상위 컴포넌트에서 하위 컴포넌트의 상태를 관리하는 데 필요한 불필요한 리렌더링을 줄일 수 있습니다.

 

이는 특히 프로젝트의 규모가 커질수록 성능에 큰 영향을 미칩니다.

Redux_Store

위 그림은 왼쪽은 Redux를 사용하지 않을 때, 오른쪽은 Redux와 같이 개발을 할 때의 차이를 보여주는 그림입니다.

 

예를 들어, 최상위 컴포넌트에서 댓글 데이터를 관리하고, 이를 하위 컴포넌트에서 사용한다고 가정해 봅시다.

만약 댓글이 추가되거나 삭제되면, 이 변경을 최상위 컴포넌트까지 전달해야 합니다.

이는 중간에 위치한 컴포넌트들에게 불필요한 렌더링을 초래하고, 컴포넌트의 수가 많아질수록 데이터 관리가 복잡해집니다.

 

하지만 Redux를 사용하면, 이러한 문제를 해결할 수 있습니다.

 

Redux는 Redux store를 통해 전역 상태를 관리하므로, 각 컴포넌트는 Store에 직접 접근하여 데이터를 사용할 수 있습니다.

Redux의 장단점 🧐

모든 도구와 같이 Redux 역시 장단점이 있습니다.

장점

• 상태를 중앙에서 효과적으로 관리할 수 있습니다.
• 상태를 어디에서 관리해야 할지에 대한 고민을 줄일 수 있습니다.
• 어떤 액션이 취해졌고, 어떤 데이터가 어떻게 변경되었는지 쉽게 추적할 수 있습니다.

단점

• 러닝 커브가 큽니다: Redux개념을 익히기 위해서는 상당한 시간과 노력이 필요합니다.
• 방대한 코드양: Redux를 통해서 작은 기능을 구현하는데도 상대적으로 많은 코드가 필요합니다.

📕 마무리

이번 포스팅에서는 Redux에 대한 기본적인 개념과 사용 이유에 대해 간략히 설명해 보았습니다.

상태 관리 라이브러리는 Redux, MobX, Recoil 등 다양하며, 이들을 제대로 활용하기 위해서는 데이터 흐름에 대한 이해가 필요합니다.

상태 관리 라이브러리의 사용은 필수적인 것은 아닙니다.

작은 프로젝트에서 상태 관리 라이브러리를 사용하면 프로젝트의 번들 크기만 증가시킬 뿐입니다.

따라서, 프로젝트의 요구 사항과 상황을 잘 고려하여 상태 관리 라이브러리의 사용 여부를 결정하는 것이 중요합니다.

 

함께 보면 좋은 글

https://yong-nyong.tistory.com/94

[React] 상태 관리 라이브러리에 대한 고찰 (feat. redux-tookit, recoil, zustand, jotai)