[React] 리액트에서 상태 관리가 필요한 이유(feat.MVC)

State란?

리액트에서 state란 이벤트에 의해서 변경되는 값이다. 보통 특정 컴포넌트에서만 쓰는 State도 있고, 여러 컴포넌트들 간에 공유되는 State도 존재하고 전역으로 영향을 미치는 State도 존재한다. 컴포넌트 간, 전역 state로 사용하는 경우, Props Drilling을 통해서 state를 전달해야 한다.

 

State Drilling이란?
컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미
이때 중간 컴포넌트는 해당 프로퍼티를 사용하지 않음에도 불구하고 하위 컴포넌트로 전달하기 위해서 프로퍼티를 받아 전달해야 하는 일이 발생

 

왜 State를 관리해야 할까? 

서로 다른 두 컴포넌트에서 같은 데이터를 공유한다고 하자. 그러면 서로 부모 자식 관계가 아닌 이상, 직접적으로 데이터를 주고 받기 어렵다. 그래서 데이터를 부모 컴포넌트로 보내고 다시 부모 컴포넌트에서 해당 데이터가 필요한 컴포넌트로 전달해야 한다. 이것이 State Drilling이라는 개념이다. 여러 개의 컴포넌트를 거쳐서 Props를 전달하다 보면, Props가 어디에서 전달되었는지 알 수 없다. 때문에 애플리케이션에 알맞는 상태 관리 툴을 통해서 적절하게 state를 관리해야 한다.

 

State Drilling과 Context API

 

상태 관리의 역사

기존의 UI는 MVC(Model-View-Controller)를 통해 관리를 해왔다. 양방향 데이터 흐름을 가지고 있어서, 모델 상태가 바뀌면 뷰도 바뀌고 뷰에서 변경이 되면 또 다시 컨트롤러로 모델을 변경해야 했다. 모델 하나에 의존하는 뷰가 많아질수록 컨트롤러의 복잡도가 점점 올라갔고 최신 프론트엔드 웹 개발 트렌드에는 UI 인터렉션이 많아지면서 MVC 설계는 불가능해졌다.

왼) MVC 패턴 오) MVC 패턴의 문제 상황

 

이러한 문제를 해결하기 위해서 단방향 데이터 흐름을 가지는 리액트를 릴리즈하게 되었다. 이때는 전역 상태 라이브러리가 존재하지 않았기 때문에 Props를 통해서 전달하는 방식이었다. 상위 컴포넌트에서 중간 컴포넌트를 거쳐 하위 컴포넌트로 Props를 전달하였다. 앞선 언급했던 것처럼, State Drilling 방식의 문제점이 존재했다.

 

이와 동시에 페이스북에서는 MVC 설계의 문제를 해결하기 위해서 단방향 데이터 흐름을 가지는 Flux 패턴을 공개했다. Flux 패턴은 기존의 MVC 패턴에서 존재했던 뷰와 모델의 변화에 따라 연결된 많은 것들이 변경되는 문제를 없애고 예측이 가능하다는 특징이 있다. 이는 사용자 입력을 기반으로 Action을 만들고, Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처이다. 

 

페이스북에서 공개한 Flux 패턴

Flux 패턴에 대한 자세한 설명은 이곳을 참조하면 된다.

 

뷰 라이브러리가 발전하면서 훨씬 복잡한 웹 애플리케이션이 생겨나면서 전역 상태 관리에 대한 중요성이 대두되었다. 이때, React + Flux 의 구조에 Reducer를 결합한 Redux 구조가 생겨났다. Redux는 State Drilling 문제와 상태 공유에 따른 컴포넌트 간의 의존성 문제를 해결하는 대안으로 떠올랐다.

 

그 이후에 React Hooks가 등장했고 Context API를 통해서 State Drilling 문제를 해결하고 역할에 따른 상태 분리가 가능해졌다.