[Fronted] 상태관리 라이브러리

Prop Drilling

일반적으로 애플리케이션을 구성할 때는 다음과 같이 최상단의 App 컴포넌트부터 시작해 하위 컴포넌트를 포함시키는 구조를 사용합니다.

 

그런데 만약 최상단의 App 컴포넌트와 최하단의 Comp3 컴포넌트가 같은 상태값을 공유하여 사용해야 한다면, Comp1를 통해 해당 값은 props로 전달해주어야 합니다.

 

이 과정에서 Comp1은 불필요한 props가 늘어나게 됩니다.

 

하위 컴포넌트인 Comp3과 Comp5가 상태값을 공유하는 경우에도 동일하게 불필요한 props 전달이 이루어집니다.

 

이렇게 컴포넌트 간 공유해야 하는 상태값이 많아질수록, 자신은 사용하지 않으면서 넘겨주어야 하는 props의 수가 많아지게 됩니다.

 

이렇게 불필요한 props가 많아지는 현상을 Prop Drilling 이라고 합니다.

 

상태관리 라이브러리

상태관리 라이브러리는 이러한 prop drilling을 해결하고, 상태관리를 용이하게 해주는 외부 라이브러리입니다.

 

상태관리 라이브러리에는 다양한 종류가 있습니다.

 

Redux나 Zustand와 같이 프레임워크에 관계 없이 독자적으로 사용할 수 있는 라이브러리도 있는 반면,

 

Recoil(React 전용)나 Vuex(Vue.js 전용)과 같이 특정 프레임워크에 종속된 라이브러리도 있습니다.