Front-End의 상태 관리 (State Management)

상태를 효율적으로 관리하고 보여주는 것이 프론트엔드 역량의 핵심이라는데.. 여기서 자주 나오는 용어인 '상태 관리'는 무엇인가?

 

Front-End 에서의 '상태관리'란?

1. 데이터를 설계된 UI/UX에 맞게 설계하고 구현하는 일이며, 2. 네트워크를 통해 서버로 전달되는 client의 요청에 따라 변화하는 상태를 관리하는 일.

 

상태관리 방법

1. 프레임워크 등장

- React, Vue, Svelte 등의 프레임워크 등장

- 앵귤러의 등장으로 상태는 과거의 DOM에서 탈출할 수 있게 되었다. front-end 개발자는 DOM이 아닌 JavaScript에서 상태를 관리할 수 있게 되었다. 즉, DOM에 접근하는 로직이 필요없어지게 되었다는 것이다. 거기에다 필요한 상태들을 controler에 모아서 관리하게 되면서 데이터에 초점을 맞춘 개발이 가능해졌다.

- 상태 Data 값이 바뀌면 작업이 수행되도록 하여 문제가 생기면 어디서 발생했는지 알 수 있게 되었다. 이 또한, 언제 어떻게 발생했는지에 대한 디버깅은 계속하여 고민해야한다.

2. 라이브러리 등장

- Redux와 같은 라이브러리의 등장으로 언제 어떻게 상태가 변화되었는지에 대한 제어가 한결 간편해짐. Redux는 flux패턴을 도입하여 단방향 데이터흐름으로 상태를 제어한다. - 이 덕에 디버깅이 매우 쉬워짐.

** flux패턴 이란?
- 기존에 사용되던 MVC(Model-View-Controler)패턴의 단점을 보완하고자 페이스북(Facebook)에서 발표한 패턴
- 구.MVC pattern)  사용자 인터페이스와 비즈니스 로직 처리를 하는 구간이 명확하게 나뉘어져 있어, 여러 사람과 개발할 때 각자 맡은 부분에 대해서만 개발할 수 있다는 장점을 가지고 있어서 많이 사용되어 왔음. but. model과 view가 서로 '양방향'으로 의존되어 있는 관계 때문에 프로젝트의 규모가 점점 커짐에 따라 프로젝트의 복잡도 또한 같이 커지게 되는 단점이 존재
- 가장 큰 특징은 >>단방향 데이터 흐름<< : 단방향 데이터 흐름을 이용하면 데이터의 변화를 예측하기 쉽게 만들 수 있게 된다.

1. Action: 특정 행동을 하기 위한 액션을 의미. 일반적으로 타입과 Data를 담고 있음.
2. Dispatcher: 전달받은 Action에 맞는 특정 Callback 처리가 이루어지는 장소. 처리된 Data를 Store에 전달.
3. Store: Dispatcher에서 처리된 데이터들을 보관하고 있는 장소
4. View: 말 그대로 화면을 의미. Store에 저장되어 있는 Data를 가져와서 사용자에게 보여줄 수 있음.

- Redux의 경우 전역 상태 저장소를 제공하고, Props drilling 문제도 해결함. 특히 react-dedux나 최근에 나온 Recoil 등은 리액트에서 리렌더를 방지해주는 최적화 기능까지 들어있어 성능이슈까지 해결해준다. 

** Props drilling: Props(기능)을 사용하는 레벨에 도달할 때까지 필요하지 않더라도 계속 그 레벨을 찾아서 내려가는 현상

- 현대의 웹은 웹앱으로 진화하고 있는데.. 하나의 페이지에서 여러가지 정보를 실시간으로 동기화 해줄 필요성이 있다. 여기서 out-of-date 문제가 발생한다. 뿐만 아니라 전역상태의 경우 필요한 시점이 아닌 최상단에서 데이터 fetch를 하게 되면서 데이터 흐름 파악이 어려워진다.

3. SWR(Stale-While-Revalidate)

- 원격 데이터 fetch를 위한 모듈. 원격 서버의 상태를 가져와서 React 컴포넌트에 준다.

 

앞으로의 상태관리

1. 실시간 & 앱

2. 서버리스

- 데이터(상태)를 다르는 로직이 점점 백엔드에서 프론트엔드로 넘어오는 추세이다. 이를 더 효율적으로 처리하기 위해서 프론트엔드는 클라우드를 통해 서버 없이 작업을 하는 형태가 되어가고 있다..

- 서버리스는 실제 서버가 없다는 의미가 아니라, 데이터 처리 로직만 개발하여 클라우드에 올리는 방법을 의미.

 

 

 

참고

https://haesoo9410.tistory.com/343

<FE> 프론트엔드 상태 관리와 역사