[Redux] 무작정 시작하기 (1) - Redux란?

서론

  Javascript로 클라이언트 사이드 렌더링을 구현하다보면 부모 컴포넌트의 상태가 변경될 때, 자식 컴포넌트의 상태도 변경되는 경우가 많다. 이런 경우에는 부모가 자식에게 변경된 상태를 전달하여 변경되었음을 직접 알려주어야 한다. 그런데, 부모에게 받은 상태값을 자신의 자식에게도 전달해야 하는 경우도 있다.

  예를 들어, 메인화면에서 로그인을 했을 때, 헤더에는 유저의 정보를 보여주고, 메뉴목록에는 회원만 접근가능한 회원메뉴이 추가된다. 이 때 상태값의 흐름을 살펴보면 상위에서 하위로 계속 전달되는 것을 알 수 있다.

[ '메인화면 > 헤더 > 유저정보' , '메인화면 > 메뉴목록 > 회원메뉴' ]

 

  그렇다면, 로그인 여부에 대한 상태값을 필요로 하는 자식이 100-Depth에 있다고 가정해보자. 100-Depth에 도달할 때까지 상태값을 계속 밑으로 전달해야한다. 이렇게 일련의 순서로 이벤트가 진행되는 패턴을 반복자(Iterator) 디자인 패턴이라고 하는데, 가장 쉽게 접할 수 있지만 이벤트의 수가 길어질수록 개발도 복잡해진다. 이 상황에 자신이 원하는 상태값이 변경되는 것을 누군가 알려주고 그 값까지 전달받을 수 있는 옵저버(Observer) 디자인 패턴을 적용하면 도움이 될 것이다. 그래서, 사용되는 것이 Redux, Mobx 와 같은 상태관리도구들이다.

 

 

  이 중 가장 많이 사용되는 Redux에 대해서 알아보도록 하자.

 

 

 

1. Redux란?

  Redux는 애플리케이션 상태를 관리하기위한 오픈 소스 JavaScript 라이브러리이며, React와 Angular와 같은 프론드앤드 프레임워크와 함께 주로 사용된다.

 

 

2-1. Redux의 구성요소

  Reudx는 클라이언트가 저장소(Store)를 구독(Subscribe)하면, 상태가 변경되었을 때 바로 구독자들에게 알림(Dispatch)을 보내는 방식의 옵저버(Observer) 디자인 패턴이다. 구성요소를 정리해보면 다음과 같다.

 

 

1) Store - 구독자들에게 제공할 데이터를 보관하는 장소.

2) State - 저장소에 저장되어 있는 상태값.

3) Subscribe - 저장소에 있는 데이터가 갱신될 때 호출되는 이벤트.

4) Dispatch - 저장소에 저장된 데이터의 갱신을 요청하는 이벤트.

5) Action - 상태값 갱신을 위한 이벤트에 대한 정의.

6) Reducer - Dispatch가 보낸 Action을 처리하고 저장소의 상태값을 변화시키는 이벤트.

 

 

2-2. Redux의 프로세스

  Redux는 단 1개의 저장소(Store)를 가지고 있다. 이 저장소에 저장된 상태(State)는 불변(Immutable)한 성격을 지니는데, 이를 변경하려면 미리 정의된 행동(Action)을 리듀서(Reducer)에게 요청(Dispatch)해야한다. 그러면, 리듀서는 요청받은 행동과 상태를 확인하고, 상태를 복제하여 새로운 상태값을 적용한다. 처리가 완료되면 저장소를 구독(Subscribe)하고 있는 모든 구독자들에게 상태의 변경을 알린다.

 

  Reducer는 이전의 State를 복제하여 새로운 값을 갱신한 뒤 결과를 반환하는데, 이러한 특성 때문에 이전 상태와 현 상태를 파악할 수 있다. Redux DevTools를 이용하면 타임 슬립(Time Slip)도 가능하여 State에 따라 화면이 어떻게 바뀌는지 확인할 수 있다.

 

 

 

마치며

  Redux는 React를 다루면서 State를 관리하기위해 사용하고 있다. 그러다, 생각처럼 동작하지 않아서 Redux에 대해서 이론적으로 찾아보게 되었다. 찾아보다가 다른길로 빠져서 옵저버(Observer) 디자인 패턴을 알게 되었는데, Redux는 이 디자인 패턴 하나로 다 설명이 되는 것 같다. Reducer나 Action은 Redux에서 옵저버 디자인 패턴을 만드는 하나의 도구일뿐이라는걸 깨닫게 되었다. 아무튼, 다음 포스트에서는 이 Redux를 이용하여 간단한 예제를 만들어 보도록 하겠다.

  

  참고로 여기 티스토리도 Redux를 사용하고 있음.