알아두면 좋은 Redux(리덕스) 배경지식

Redux란 무엇일까?

  Meta (구.Facebook) 에서 React가 함께 소개한 flux-architecture를 구현한 라이브러리이다.
  무엇을 위해서 사용되는지, 간단히 말하자면 컴포넌트들 끼리 데이터 교류 및 스테이트 관리를 쉽고 효율적으로 할 수 있게 해주는 라이브러리이다.

MVC?

  어떠한 액션이 입력되면 컨트롤러는 액션을 받아서 모델이 지니고 있는 데이터를 조회하거나 업데이트 할 수 있고, 그 변화는 뷰에 반영된다.
  또한 뷰에서 모델로 접근하여 업데이트 할 수 있다. 이런 구조는 작은 애플리케이션에서는 큰 문제없이 작동한다. 그렇다면 애플리케이션의 규모가 커지면 어떻게 될까?

모델과 뷰의 갯수가 많아지면 구조가 복잡해진다.

여담으로, Flux와 React는 Meta가 가지고 있었던 특정한 문제점들을 해결하기 위해서 개발되었다.
이 문제점들 중 가장 잘 알려져 있는 것은 알림(notification) 버그이다.
Facbook에 로그인 했을 때 화면 위의 메시지 아이콘에 알림이 떠 있지만, 그 메시지 아이콘을 클릭해서 들어가보면 아무런 메시지가 없던 적이 있었을 것이다.
알림은 사라지겠지만, 몇 분 뒤 알림이 다시 나타나고 여전히 아무런 메시지도 나타나지 않는다. 그리고 이 사이클(cycle)은 계속 반복된다.
이 사이클은 단순히 사용자 뿐만이 아니라 Facebook의 팀에서도 있었다.
팀이 이 버그를 고치고 얼마동안은 괜찮았지만 업데이트를 하다보면 곧 다시 나타났다.
이렇게 해결되고 다시 문제가 생기는 사이클이 계속 반복되었다.
그래서 Facebook은 사이클을 벗어날 방법을 찾고 있었다.
단순히 단기적인 해결책이 아니라, 시스템을 더욱 예측가능하게 만들어서 문제점을 완전히 없애길 원했다.

Flux?

  아이디어라고 생각하자. 라이브러리나 프레임워크와는 다르게 추상적인 개념이다.
그 추상적인 개념을 구현한 것이 Redux.

  System에서 어떤 액션을 받았을 때, 디스패쳐가 받은 액션을 통제하여 스토어에 있는 데이터를 업데이트함.
  그리고 변동된 데이터가 있으면 View에 리랜더링한다.

  뷰에서 스토어로 직접 접근하지 않는다. 뷰에서 디스패쳐로 액션을 보낸다.
디스패쳐에서는 작업이 중첩되지 않도록 해준다.
  즉, 어떤 액션이 디스패쳐를 통하여 스토어에 있는 데이터를 처리하고 그 작업이 끝날때까지 액션을 대기 시킨다.

단어 정리

• 액션 생성자 (The Action Creator)
  어떤 부분이 업데이트 되야 할지 액션 형태로 변환해서 디스패쳐가 알아 볼 수 있게 해준다.

• 디스패쳐 (Dispatcher)
  액션을 받으면 액션을 읽고 어떤부분을 업데이트 할지 정해준다. 그리고 동기적으로 실행한다.
  여러 액션이 들어오면 우선권을 가진 액션을 먼저 처리하면서 순서대로 처리한다. 그래서 꼬이지 않는다.

• 스토어 (Store)
  모든 상태와 관련된 로직을 지니고 있다.

• 뷰 (View)
  애플리케이션의 내부에 대해서는 아는게 없지만 사람들이 이해할 수 있는 HTML로 바꾸는 방법을 알고있다.
  
  

준비과정

1. 스토어는 디스패쳐가 액션이 들어오면 알려달라고 한다.
2. 뷰는 스토어에게 최신 상태를 묻는다.
3. 스토어가 뷰에게 상태를 전달해 주면 데이터를 렌더링하기 위해 모든 자식 뷰에게 상태를 넘겨준다.
4. 뷰는 스토어에게 상태가 바뀔 때 알려달라고 다시 부탁한다.
   
   

데이터 흐름

1. 뷰는 액션 생성자에게 액션을 준비하라고 말한다.
2. 옵션 버튼이 있으면 토글하는게 액션
   • 버튼 누르면 액션
   • 글쓰기 버튼 누르면 액션
3. 액션 생성자는 액션을 포맷에 맞게 만들어서 디스패쳐에 넘겨준다.
4. 디스패쳐는 돌아온 액션의 순서에 따라 알맞은 스토어로 보낸다.
   각 스토어는 모든 액션을 받게 되지만 필요한 액션만을 골라서 상태를 필요에 맞게 변경한다.
5. 상태 변경이 완료 되면 스토어는 자신을 구독(Subscribe) 하고 있는 뷰에게 그 사실을 알린다.
6. 연락을 받은 뷰는 스토어에게 변경된 상태를 요청한다.
7. 스토어가 새로운 상태를 넘겨주면, 뷰는 자신 아래의 모든 뷰에게 새로운 상태에 맞게 렌더링하라고 알린다.

Flux 카툰안내서

https://bestalign.github.io/translation/cartoon-guide-to-flux/

React.js 강좌 5-1 편 Redux: 배경지식 | MVC, FLUX

https://www.youtube.com/watch?v=LRUQfJLuPA8