React를 쓰다보니 Redux가 궁금해졌다

📌  Redux를 찾게된 이유?

 

React로 간단한 웹 페이지를 만들고 있었다.

댓글을 입력했을 때 기존 댓글에 내 댓글이 추가되는 기능을 구현하고 싶었다.

useState를 사용해서 데이터를 받아와 컴포넌트안에서 조작해주면 내가 원하는 그림을 얻을 수 있었다.

그런데 문제는 형제 컴포넌트였다.

댓글창 외에도 내 개인정보가 담긴 창에 왔을 때 내가 쓴 댓글들이 촤라락 보이게끔 만들고 싶었다.

그럴려면 댓글창에서 업데이트 된 그 정보가 개인정보 창에도 필요할 것 같았다.

즉, 다른 컴포넌트 안에 있는 정보를 이 컴포넌트가져와야 하는데...

필요한 코드를 그대로 복붙하는 것 말고는 방법이 생각이 안났다. State와 Props를 몰랐을 시절 ㅋㅋㅋㅋㅋ

이 방법이 너무 싫어서 구글링해보다가 global state '전역 상태'에 대한 개념을 알게되었다.

 

 

📌  Flux는 뭘까?

 

Flux는 페이스북에서 Client-Side-Web-Applicaiton을 만들기 위해 개발한 App Architecture다.

단방향 데이터 흐름을 활용해 뷰 컴포넌트를 구성하는 React를 보완하는 역할을 한다.

(Vue.js와 Angular.js는 프레임워크인 반면 React는 라이브러리이기때문에 구조적인 면에서 약했던 부분을 보완 😃😃)

이전의 프레임워크와 달리 "패턴"의 모습을 하고 있어 코드에 바로 적용해 사용할 수 있다고 한다.

 

 

✅  MVC의 문제점

 

 

Flux를 설명할 때 MVC 모델과 많이 비교한다.

정보처리기사를 준비하며 MVC 모델을 접했던 기억이 나는데, 당시에는 '와 이방법 좋다' 라고 생각했었다.

규모가 작은 App을 만들때는 유용하지만 그 크기가 커졌을 때는 감당하기 어려운 방법이란 걸 오늘 깨달았다.

MVC는 양방향 바인딩 시스템이기 때문에 App의 크기가 커질수록 코드의 인과 관계를 파악하기 어렵다.

 

 

✅   Flux의 등장

 

 

Flux는 MVC와 다르게 단방향으로 데이터가 흐른다.

React view에서 사용자가 상호작용할 때 ( id 입력, 댓글 입력, 게시물 올리기, 좋아요 클릭 etc )

해당 view는 중앙의 dispatcher를 통해 action을 전파한다.

App의 Data와 Business logic을 담고 있는 store은 action이 전파되면 이 action의 영향이 미치는 모든 view를 갱신한다.

이 방식은 특히, React와 잘맞는 게 view가 어떤 방식으로 갱신되어야하는 지 컴포넌트마다 일일이

작성하지 않고서도 데이터를 변경할 수 있기때문에 세상세상 편리하다.

글을 쓰면서도 wow 너무 편할것같다는 생각을 한다 !!!

 

 

◾  Flux의 구성

 

 

Dispatcher / Stores / Views (React 컴포넌트라 말해도 무방)

 

✔  action은 dispatcher에게 action creator 메소드를 제공한다. ( 대부분의 action은 사용자 상호작용에서 발생하긴 함 )

 

✔  모든 action은 store가 dispatcher에 등록해둔 callback을 통해 모든 store에 전송된다.

 

✔  action에 대한 응답으로 store가 스스로 갱신을 한 다음에는, 자신이 변경되었다고 모두에게 알린다.

 

controller-view라고 불리는 특별한 view가 변경 이벤트를 듣고,

새로운 데이터를 store에서 가져온 후,

모든 트리에 있는 자식 view에게 새로운 데이터를 제공한다.

 

-->  App 상태는 store에 의해 관리되고 App의 다른 부분과는 완전히 분리된 상태로 남는다.