13. redux - part1

이번 포스팅은 redux에 대한 포스팅입니다.

시작하겠습니다.

Redux란?

redex는 단일 스토어를 사용하는,  javascript application 에서 state를 관리해주는 도구로써, SPA에서 매우 유용하게 사용됩니다. react 뿐만 아니라, 다른 프레임워크를 사용하는 Application에도 사용이 가능합니다.

간단하게 말해서, state를 관리하는 아키텍쳐 방법 이론중 하나입니다.

Redux 사용 이유

혹시 이전 포스팅에서 공부했던 상위 컴포넌트에서 하위 컴포넌트를 바꾸는 것,

혹은 하위 컴포넌트에서 상위 컴포넌트를 바꾸는것에 대해 기억이 나시나요?

링크 : http://jaroinside.tistory.com/20

당시 redux를 사용하지 않고 데이터의 이동을 하기 위해서는 계속해서 props를 통해 하위 컴포넌트로 계속해서 데이터를 넘겨주는 방식으로 구현하였습니다.

즉 하나의 data를 변경하기 위해 많은 컴포넌트들을 거쳐가야만 했습니다.

이러한 방법은 비효율적일뿐만 아니라, 프로젝트가 커질수록 개발자로 하여금 복잡성을 증가시키고,

에러를 유발할 가능성도 커지게 됩니다.

아래 보이는것은 redux를 사용하지 않았을때의 데이터 흐름 예제입니다.

왼쪽의 붉은색 원을 클릭하여 확인해주세요.

( 이것은 제가 포스팅하는 세미나의 주최자이며 현 Studio XID에서 재직중인 이웅재님이

자사에서 서비스중인 protopie를 이용하여 만들었습니다. )

Redux의 데이터 교류

그렇다면 Redux는 어떠한 방식으로 데이터를 교류하는것일까요?

Redux는 기본적으로 Flux 아이디어를 발전시킨 형태라고 생각할수 있습니다.

그렇다면 Flux란 무엇일까요?

Flux는 디자인 패턴중 하나입니다.

FaceBook에서  Client Side Web Application을 만들기 위해 사용하는 Application 아키텍쳐로, 단방향 데이터 흐름을 활용해 뷰 컴포넌트를 구성하는 react를 보완하는 역할을 합니다.

Flux는 MVC 모델과는 다르게 단방향으로만 데이터가 흐르게 됩니다.

그림 출처 : https://haruair.github.io/flux/docs/overview.html

Flux는 그림과 같이 시스템이 어떠한 action을 받았을 경우, Dispatcher는 action들을 관리, 통제하여 store에 있는 데이터들을 업데이트하게 됩니다. 그리고, store에 업데이트된 ( 변동된 ) 데이터가 있다면 view에 렌더링을 하게 되는 방식입니다.

그림 출처 : https://haruair.github.io/flux/docs/overview.html

또한 view에서 Dispatcher로 action을 보낼수도 있습니다.

이러한 방식은 react의 선언형 프로그래밍 스타일. 즉, view가 어떤 방식으로 갱신해야 되는지 일일이 작성하지 않고서도 데이터를 변경할 수 있는 형태라는 점에서 매우 편리합니다.

자 그럼 Flux에 대해서도 기본적인 지식은 습득을 하였으니 다시 Redux로 돌아오겠습니다.

Redux는 위에서 서술하였듯, Flux 아이디어를 발전시킨 형태입니다.

단방향 데이터 흐름을 지닌다는 의미입니다.

아래 보이는것은 redux를 사용하였을때의 데이터 흐름 예제입니다.

왼쪽의 붉은색 원을 클릭하여 확인해주세요.

( 이것은 제가 포스팅하는 세미나의 주최자이며 현 Studio XID에서 재직중인 이웅재님이

자사에서 서비스중인 protopie를 이용하여 만들었습니다. )

예제에서 살펴보듯 각 각 컴포넌트간에는 데이터의 교류가 일어나지 않습니다.

외부의 다른 데이터 저장소를 통하게 됩니다. ( Store )

Redux의 작동 순서

action발생 -> Dispatch -> reducer -> store update - > rendering

Redux의 3가지 원칙

진실은 하나의 소스로부터

- redux는 하나의 어플리케이션에서 state를 관리하기 위하여 오직 하나의 store만 사용합니다 ( 단일 스토어 ) 그렇기 때문에 store에서의 state를 어떻게 잘 관리하는지가 중요합니다.

 

상태는 읽기 전용이다.

- 어플리케이션에서 store에 있는 state를 변경하기 위해서는 반드시 action 객체를 통해서만 가능합니다. 다른 방법으로는 할수가 없습니다.

변화는 순수 함수로 작성되어야 한다.

- 위에서 Redux의 작동 순서에서 reducer라는것을 통한다고 하였습니다. action객체는 어떠한 변화가 일어나야 하는지 알려주는 객체일뿐, 변화를 일으키지는 못합니다. 이전 상태와 action의 정보를 받고 state를 변화시키는것은 reducer가 하는것으로, 여기서 말하는 변화는 reducer를 의미합니다.

즉 reducer는 순수함수로만 작성되어야 하는데, 

1. 같은 입력에 항상 같은 결과를 반환하여야 합니다.

2. 사이드 이펙트가 없어야 합니다.

3. 외부상태와 무관해야 합니다.

정리

Redux는 Flux와 같이 단방향 데이터 흐름을 갖고 있으며, 단일스토어를 사용합니다.

action을 dispatch 하여 reducer로 store의 state를 변화시킨 후, 변화한 값을 view에 적용시키게 됩니다. 

다음 포스팅에서부터는 실제로 redux를 typescript로 사용하는것을 예제로 하여 해보겠습니다.

중간중간 일반 javascript를 이용한 redux 예제도 추가적으로 포스팅할수 있도록 하겠습니다.

감사합니다.

---

참고 슬라이드 - http://slides.com/woongjae/react-with-typescript-3#/

참고 동영상 - https://www.youtube.com/playlist?list=PLV6pYUAZ-ZoHx0OjUduzaFSZ4_cUqXLm0
참고 사이트 - https://deminoth.github.io/redux/