상태 관리

상태 관리란?

먼저 상태(State)란 애플리케이션에서 변하는 데이터를 의미한다. 예를 들어, 사용자가 입력한 폼 데이터나, 서버에서 가져온 데이터, 현재 로그인 상태 등이 모두 상태에 해당한다. 이러한 상태를 관리한다는 뜻의 상태 관리(State management)란 애플리케이션의 상태를 효율적으로 관리하기 위한 기술이다.

상태관리(라이브러리) 필요성

상위 컴포넌트에서 상태를 전달받을 경우 단계가 많지 않다면 큰 문제가 없었겠지만

만약 하위 컴포넌트가 복잡하고 수없이 많이 존재했다면 어떻게 전달할까? props로 내려주는것도 한계가 있을것이다.(Props drilling 문제 발생)

Props drilling 이슈

이렇듯 대규모 애플리케이션에서는 상태가 매우 복잡해지고, 여러 컴포넌트에서 공유되기 때문에, 상태를 관리하기 위한 효율적인 방법이 필요하다.
먼저 상태 관리를 효과적으로 사용하기 위해서 상태를 변경하는 모든 컴포넌트가 동일한 상태를 공유하도록 해야한다. 이를 위해, 중앙(전역상태)(store)에 상태를 저장하고, 상태를 변경하는 모든 컴포넌트는 중앙(store)의 상태를 변경하는 방식을 사용한다. 이러한 방식은 컴포넌트 간에 상태가 동기화되도록 보장하며, 코드의 중복을 줄이고 유지보수성을 높일 수 있다.

'

또한, 상태 관리는 다양한 상황에서 유연하게 대처할 수 있도록 해준다. 예를 들어, 사용자의 입력에 대한 처리가 변경되거나, 서버에서 가져오는 데이터가 변경될 경우, 상태를 중앙에서 관리함으로써 해당 변경 사항에 대한 처리를 효율적으로 수행할 수 있다.

전역 상태는 여러 컴포넌트에서 공유되는 데이터를 의미합니다. 

예를 들어, 사용자가 로그인하면 그 사용자에 대한 정보를 전역 상태로 저장할 수 있습니다. 이렇게 전역 상태로 저장하면, 다양한 컴포넌트에서 이 정보를 사용할 수 있습니다. 전역 상태를 관리하기 위해서는 상태를 전역으로 관리하는 저장소가 필요합니다. 
이를 위해 Redux, MobX, VueX 등의 상태 관리 라이브러리를 사용할 수 있습니다. 이러한 라이브러리를 사용하면 전역 상태를 효율적으로 관리할 수 있으며, 상태 업데이트를 예측 가능한 방식으로 처리할 수 있습니다.
전역 상태로 관리하면, 여러 컴포넌트에서 중복되는 코드를 줄일 수 있고, 상태를 효율적으로 관리할 수 있습니다./또한, 애플리케이션의 규모가 커질수록 전역 상태 관리가 필수적입니다.

상태 관리 라이브러리는 프로젝트의 규모나 복잡도에 따라 필수적일 수도 있고, 선택적일 수도 있습니다.

작은 규모의 프로젝트에서는 상태 관리 라이브러리를 사용하지 않아도 충분히 구현할 수 있습니다.
하지만 프로젝트의 규모나 복잡도가 커지면 상태를 관리하는 것이 어려워지기 때문에 상태 관리 라이브러리를 사용하는 것이 좋습니다. 상태 관리 라이브러리를 사용하면, 상태를 효율적으로 관리할 수 있고, 애플리케이션의 구조를 명확하게 유지할 수 있습니다.
또한, 여러 컴포넌트에서 공유하는 상태를 효율적으로 관리할 수 있기 때문에 코드의 중복을 줄일 수 있습니다.
Redux, MobX, VueX 등의 상태 관리 라이브러리는 많은 기능을 제공하기 때문에 프로젝트의 규모나 복잡도가 크다면 필수적으로 사용하는 것이 좋습니다. 하지만 작은 규모의 프로젝트에서는 상태 관리 라이브러리를 사용하지 않고도 충분히 구현할 수 있기 때문에 선택적으로 사용하는 것이 좋습니다.

---

상태 관리 툴 종류

JavaScript 애플리케이션에서 상태 관리를 위한 여러 툴이 이미 만들어져 있다. (대표적인 상태 관리 도구는 Redux, MobX, Vuex 등)

1. Redux: Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나다. Redux는 React와 함께 사용될 때 매우 효과적이며, 애플리케이션의 상태를 중앙에서 관리한다.
2. MobX: MobX는 간단하고 직관적인 API를 제공하여 React와 함께 사용하기 쉽다. MobX는 반응형 상태 관리를 통해, 애플리케이션의 상태를 변경하고 관리한다.
3. Vuex: Vuex는 Vue.js와 함께 사용되는 상태 관리 도구다. Vuex는 애플리케이션의 상태를 중앙(store)에서 관리하며, Vue.js의 생명주기 훅(인스턴스 상태에 따라 호출할 수 있는 속성을 생명주기라 하고 그 속성마다 개발자가 추가한 커스텀로직을 라이프사이클 훅(생명주기)라 한다.)과 함께 사용될 때 효과적이다.