본문 바로가기
Development/Front-end

React에서 Redux가 왜 필요할까?

by 수달05 2020. 10. 4.

안녕하세요! 

 

휴몬랩 초보 개발자 수달입니다. :)

 

 리액트를 이용한 웹을 개발하다 보면, State 관리에서 빈번한 오류 발생과 현재의 값 확인이 매우 복잡한 경우가 존재합니다.

 

props와 state를 사용하여 값이 이리저리 바뀌는 것을 보다가 흐름을 놓치게 되면 개발하던 컴퓨터를 덮은 채로 눕고 싶은 생각이 들곤 할겁니다. (저만 그랬나요?) ㅎㅎ;

이렇듯 복잡하고 흐름을 따라가기 힘든 state 관리에 Redux라는 라이브러리를 사용하라는 선배 개발자들의 많은 포스트들이 존재합니다.

 

 

하지만 더 좋으면서도 "어렵다" 라는 이야기를 항상 빼놓지 않는데요..! 그럼 우리는 어려운 Redux를 왜 사용해야 할까요?

 

그리고 왜 Redux가 편리한 도구라고 표현하는 것일까요??

오늘은 "어렵다"라는 말과 "편리하다" 라는 말이 공존하는 React + Redux에 대해 살펴보도록 하겠습니다.

 

시작합시다. :D

 


리덕스란 무엇인가?

 

가장 먼저 우리는 리덕스의 정체가 무엇인지 밝혀봅시다.

 

리덕스는 애플리케이션의 state를 관리하기 위한 오픈소스 JavaScript 라이브러리입니다.

 

React 라이브러리에서도 우리는 state관리를 충분히 진행할 수 있었음에도, 새로운 라이브러리를 만든 이유는 무엇일까요?

 

그 비밀은 바로 개발 패턴에 숨겨져 있습니다.

 

리덕스가 등장하기 이전 프론트엔드에서 데이터의 흐름을 관리하는 방식은 MVC 패턴이었습니다.

 

  • Model— 데이터 형식이나 구조를 관리
  • View — 코드가 사용자에게 보여지는 부분을 담당
  • Controller — 변화하는 데이터를 관리

이 처럼 Model, View 그리고 Controller를 통해 state를 관리하는 과정은 아래와 같은 그림으로 표현할 수 있습니다.

 

출처 : http://aalmiray.github.io/griffon-patterns/

 

위 그림에서 확인할 수 있듯이, state가 변화하게 되면, View, Model, Controller에 이벤트가 발생하고 값이 변화하는 등, 복잡하고 데이터 흐름을 파악하기 힘든 구조로 되어 있었죠.

 

이것의 가장 큰 원인은 바로, '양방향 데이터 흐름' 이라는 점이었습니다.

 

프로젝트가 커질 수록 양방향 데이터 흐름을 제어하는 과정이 너무도 복잡해졌으며, 개발자들에게 큰 불편성을 야기했습니다. 

 

이러한 state관리의 문제는 개발적인 측면 뿐만 아니라, 사용자 측면에서도 발생하였습니다.

 

사용자와의 상호작용이 굉장히 많아지고 있는 요즘의 웹사이트에서 특히, state관리가 복잡해짐에 따라 실시간으로 구동되어야 하는 기능이 제대로 이뤄지지 않아, state 차이로 인한 버그가 발생하는 등 다양한 문제점이 존재하였습니다.

 

위와 같은 문제점을 해결하기 위해 '단방향 데이터 흐름' 이라는 특징을 갖는 라이브러리를 개발하고자 했고, 2014년 페이스북에서 flux를 개발하게 됩니다.

 

flux에서 채택한 데이터흐름은 아래의 그림과 같습니다.

 

View는 MVC 패턴과 달리 데이터를 직접 변경시키지 않고 Action만을 넘겨준 후, View에서 이뤄진 Action은 반드시 Dispatcher를 거쳐 데이터 변경을 진행하게 됩니다.

 

데이터 변경이 이뤄진 이후, Store에 값을 저장하는 과정을 통해 View는 변경된 데이터를 Store를 통해서 전달받게 됩니다.

 

위와 같은 과정을 통해 이뤄진 데이터 변경은 뷰와 모델 사이의 state 전이를 간편화해주고 기존에 흐름을 파악하기 어려웠던 관리에 예측이 가능하게 해주어, 더욱 편리한 state 변경 방법을 제시하게 됩니다.

 

위와 같은 방식을 채택하여 최종적으로 2015년에 Dan Abramov에 의해서 React + Flux의 구조에 ‘Reducer’를 결합한 ‘Redux’가 등장하게 됩니다.

 

`Redux = (Red)ucer + Fl(ux)`

 

 

 

 

최종적으로 우리는 redux가 단방향 흐름을 통해 오류와 state 관리에 간편함을 가져다 줄 수 있다는 것을 알게 되었습니다.

 

그렇다면 redux는 정말 편리하고 안전한 state관리를 이룩해주는 좋은 도구가 맞을까요?

 

시각적으로 이를 살펴봅시다.

 

기존의 MVC 패턴 state 변경 흐름

위의 흐름이 우리가 기존에 사용하던 방식의 state 처리 방식입니다.

 

한 번의 변경으로 수많은 상태 변경 과정이 이뤄져야 하며, 이 과정에서 불필요한 렌더링과 state 처리가 발생하는 경우도 존재합니다.

 

이러한 방식이 오류가 발생하는 원인이 되며 흐름 자체를 파악하여 어디서 오류가 났는지 조차도 모르는 경우가 많습니다.

 

 

하지만, redux를 사용하는 경우, Reducer와 Store의 등장을 통해 이 과정을 매우 간편화 할 수 있으며, 복잡하고 어려운 상태 관리를 더욱 효율적이고 간단하게 변경할 수 있다는 장점을 갖습니다.

 

크고 복잡한 프로젝트일수록 Redux를 사용하는 것이 여러분에게 큰 효율과 적은 오류를 가져다 줄 것입니다.

 

 


반드시 리덕스를 사용해야 할까?

리덕스의 개념을 이해하기 위해서는 프론트엔드 개발 과정에서 필요한 데이터 흐름에 대한 정보를 파악하고 있어야 합니다.

 

이러한 과정을 이해하지 못한 상태에서 리덕스를 사용하게 되면 개발과정이 더욱 어려워질 것이며, 흐름 조차도 파악하지 못한 채, 소스코드 작성을 포기할지도 모릅니다.

 

위와 같은 과정때문에, 우리는 리덕스를 '어렵다'라고 판단하는 것입니다.

 

리덕스는 상태관리를 효율적이고 간단하게 보여주는 하나의 도구일 뿐입니다.

 

페이스북과 같이 사용자와의 상호작용이 빠르게 이뤄지고, 이에 대한 업데이트가 수시로 진행되며, 웹 구조가 복잡한 경우에는 리덕스라는 도구는 여러분들에게 시간과 복잡성을 줄이는 좋은 도구로 활용될 것입니다.

 

 

반면에, 구조가 간단하고 복잡하지 않은 경우, 리덕스를 반드시 사용할 필요는 없습니다.

 

간단한 형태의 웹을 구성함에 있어서, React 만으로도 단방향 데이터 흐름을 충분히 사용할 수 있는 경우, Redux 라이브러리를 import 하는 것은 불필요한 라이브러리를 추가하여 애플케이션 번들 사이즈만 증가시킬 뿐입니다.

 

즉, 필요성에 대한 여부를 판단하고 사용하는 것이 가장 적절한 의사결정이라고 볼 수 있겠습니다. :)

 

 


<요약>

 

1. 리덕스는 복잡한 State관리를 단방향 데이터 흐름체계로 만들어주는 도구이다.

 

2. 구조가 간단한 경우, React만으로도 충분히 단방향 데이터 흐름을 사용할 수 있다.

 

3. 웹 구조와 흐름을 파악하고 설계과정에서 Redux의 사용여부를 결정하는 것이 좋은 애플리케이션을 구성하는데 도움을 준다.

 

 


[참고]

Redux의 제작자 Dan Abramov가 이야기하는 리덕스를 사용해야 하는 이유

stackoverflow.com/questions/32461229/why-use-redux-over-facebook-flux

댓글