[8주차] 상태 관리와 Flux Pattern

3월 11일 자 학습 내용 정리입니다.

 

 

✅ 상태 관리

상태 관리란 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것을 의미한다.
상태 관리는 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함한다.

상태 관리 기술은 높은 품질의 코드 작성, 성능 최적화, 네트워크 최적화 등에 유리하다.
localStorage 활용한 persist state와 같은 데이터 관리의 고도화를 이룰 수 있다. 

상태 관리 기술의 단점도 물론 존재한다.
파악해야 할 로직과 레이어가 많아질 수 있으며 잘못 사용할 경우 앱의 복잡도만을 높이거나 성능을 악화시킬 수 있다.
이러한 예에는 global state를 잘못 활용했을 시 앱 전체에 리렌더링을 발생시켜 성능을 악화하는 것이 있다.

 

✔️ MPA와 SPA에서의 상태관리

MPA(Multi-Page Application)에서는 서버의 데이터를 이용해 페이지를 렌더링하므로 클라이언트의 데이터와 서버의 데이터가 큰 차이를 가지지 않는다.

반면 SPA(Single-Page Application)에서는 자체적으로 데이터를 갖고 서버와의 동기화가 필요한 데이터만을 처리한다.
그 외의 데이터는 클라이언트만의 데이터로 유지된다.

 

 

✅ 상태 관리 기술이 해결하는 문제들

✔️ 데이터 캐싱과 재활용

SPA에서 페이지를 로딩할 때마다 모든 데이터를 로딩해야 한다면 네트워크 요청 수가 많아져 더 느려질 수 있기 때문에 UX 측면에서 MPA보다 좋다고 할 수 없다.

따라서 변경이 잦은 데이터가 아니라면 데이터를 캐싱하고 재활용하는 방법을 사용하고 변경이 잦은 데이터라면 데이터의 변경 시점을 파악해 최적화하는 것이 좋다. 

 

✔️ Prop Drilling

컴포넌트가 복잡해지는 경우 상위 부모와 자식 컴포넌트 간의 깊이가 커진다.
따라서 최하단의 자식 컴포넌트가 데이터를 쓰기 위해 최상위 컴포넌트로부터 순차적으로 데이터를 보내야 하는 상황이 발생한다.
이때 Context API 등을 사용해 상태를 전역으로 관리하면 필요한 컴포넌트에서 데이터를 가져올 수 있으며 컴포넌트 간의 결합성을 낮출 수 있다.

 

 

✅ Flux Pattern

Flux Pattern은 2014년 Facebook에서 제안한 웹 애플리케이션 아키텍처 패턴으로 Unidirectional data flow를 활용해 데이터 업데이트와 UI 반영을 단순화한다.
React의 UI 패턴인 합성 컴포넌트와 어울리도록 설계되었으며 redux와 react-redux의 선행 기술이다.

 

✔️ Flux Pattern vs MVC Pattern

MVC 패턴에서는 View에서 특정 데이터를 업데이트하면 연쇄적인 업데이트가 일어난다.
특정 유저의 상호작용이 여러 UI 컴포넌트가 사용하는 데이터에 영향을 줄 때 업데이트가 연쇄적으로 일어나게 되므로 앱의 복잡도를 낮추거나 업데이트의 흐름을 따라가기 어렵다.

 

반면 Flux 패턴은 하나의 Action이 하나의 Update만을 만들도록 한다.
data와 업데이트가 한 방향으로(Unidirectional) 흐르므로 UI의 업데이트를 예측하기 쉽다.

 

✔️ Flux Pattern 구조

Flux에서는 Action -> Dispatcher -> Store -> View 순으로 데이터가 흐른다.

 

 

store는 미리 dispatcher에 callback을 등록해 자신이 처리할 action을 정의한다.
action creator는 action을 생성하여 dispatcher로 보낸다.
dispatcher는 action을 store로 넘기고 store는 action에 따라 데이터를 업데이트한다.
이후 관련 view로 변경 이벤트가 발생하면 view는 그에 따라 데이터를 다시 받아와 새로운 UI를 만든다.
유저 인터렉션이 발생하면 view는 action을 발생시킨다.