Redux WHAT IS REDUX?

 

 

오늘은 리덕스의 기본 개념에 대해 알아보도록 하자. 

 

리덕스와 관련되어 자세하게 설명된 글이 있어, 

 

아래와 같이 번역하여 옮겨본다. 

 

출저: https://www.robinwieruch.de/react-redux-tutorial/

React Redux Tutorial for Beginners [2019]

 

 

WHAT IS REDUX?

 

리덕스는 어플리케이션에서 정교한 state관리를 도와주는 라이브러리로 컴포넌트의 로컬 스테이트의 한계를 넘어설 수 있도록 한다. 큰 어플리케이션에서 스테이트를 다루기 위해 사용할 수 있는 방법 중 하나로, 리엑트는 리덕스를 사용하기에 아주 좋은 어플리케이션이며 리엑트 이외에 다른 라이브러리와 프레임워크들도 같은 개념을 포용하고 있다. 

 

왜 리덕스는 자바스크립트 커뮤니티에서 인기가 좋을까? 이 질문에 답하기 위해서, 과거의 자바스크립트 어플리케이션 환경으로 돌아가 보자. 초기에는, 모든이들이 단 하나의 라이브러리만을 사용했다. 바로 jQuery. jQuery는 애니메이션과 재사용가능한 위젯으로 화려한 효과를 주며 DOM을 제어하기 위해 주로 사용되었다. jQuery는 일등 라이브러리였고 다른 선택지는 없었다. 하지만, jQuery의 사용이 폭발하면서 어플리케이션의 크기 또한 커졌다. HTML이나 CSS의 크기가 아닌 자바스크립트 코드의 크기가 말이다. 적절한 아키텍쳐가 없었기 때문에 결국 코드는 복잡해졌고 악명높은 스파게티 코드가 자바스크립트 어플리케이션의 큰 문제가 되었다. 

 

jQuery를 뛰어넘을 새로운 방법의 출현이 필요한 시기였다. 대부분 프레임워크였던 새 라이브러리들은 프론트엔드 어플리케이션에 적절한 아키텍쳐를 제공했고 문제해결을 위해 자신들만의 독선적인 방식을 취했다. 이러한 방법들은 개발자들이 Single Page Applications 실행을 가능하게 하였다. 

 

SPA는 Angular, Ember 그리고 Backbone 등 1세대 프레임워크와 라이브러리가 배포되면서 유행하게 되었고, 이렇게 어느날 갑자기 개발자들은 큰 규모의 프론트엔드 어플리케이션을 만들 프레임워크를 갖게 되었다. 하지만 모든 역사는 되풀이되듯 새로운 기술은 새로운 문제를 낳았다. SPA의 모든 해결책들은 스테이트 관리를 다른 방식으로 처리했다. 예를 들어, Angular 1은 악명높은 2방향 데이터바인딩을 사용했다. 그것은 양방향의 데이터 플로우를 채택했는데, 어플리케이션의 사이즈가 커짐에 따라 스테이트 관리의 문제가 모든 사람들에게 대두되었다. 

 

그리고 리엑트의 단방향 데이터 플로우가 인기를 끌게 되었다. 단방향 데이터 플로우를 생각해보면 스테이트 관리가 더욱 예측되기 쉬워졌어야 했다. 그러나 여전히 로컬 스테이트 관리로는 충분하지 않았다. 리엑트로는 큰 규모의 어플리케이션을 잘 만들수 있었지만, 스테이트 관리의 예측과 유지에 있어서 큰 규모의 어플리케이션에서 마찬가지 문제점을 가지고 있었다. 양방향 데이터 플로우만큼의 파괴적인 문제점은 아니었지만 여전히 큰 규모의 어플리케이션에서는 문제가 발생했다. 이때 페이스북에서 Flux 아키텍처를 소개하게 되었다. 

 

Flux 아키텍처는 큰 어플리케이션에서 스테이트 관리를 다루는 하나의 패턴이다. 공식 웹사이트에서는 "단방향 데이터 흐름이 Flux패턴의 핵심이다"라고 말한다. 데이터는 오로지 한 방향으로 흐른다. 단방향을 제외하고, Flux 아키텍쳐는 네가지의 필수 컴포넌트들로 구성된다: Action, Dispatcher, Store, View. View는 모던 어플리케이션에서의 컴포넌트 트리를 말한다. 예를 들어, 리엑트는 이러한 View를 실행 할 수 있고 유저는 Action을 유발하게끔 View를 통해 상호작용한다. Action은 Store에 스테이트 업데이트를 위해 필요한 모든 정보를 캡슐화하고 Dispatcher는 Action에서 Store까지 데이터를 이전한다. 그리고 새로운 스테이트가 Store로부터 전파되어 View에서 업데이트되고 마지막으로 단방향 데이터 흐름 루프가 종료된다. 

 

 데이터 흐름은 단방향으로 이루어지고 View는 Action을 발생시키고 이것은 Dispatcher를 통해 Store에 전달된다. 그리고 Store의 스테이트가 변경되면 View가 최종적으로 변경된다. 단방향 데이터 흐름은 이 루프안에서만 이루어지고 View는 또 다른 Action을 발생시킨다. Facebook이 Flux아키텍쳐를 소개했기 때문에 View는 React와 컴포넌트와 연관되어 있다.

 

 

... 이하 생략 (관련없는 내용)