상태란?
💡 상태: 시간에 따라 변경되는 데이터, 렌더링에 영향을 끼치는 정보를 가진 객체
상태의 종류
전역 상태(Global State)
프로젝트 전체에 영향을 주는 상태로, Prop Drilling 방식으로 부모에서 자식으로 데이터를 전달한다.
지역 상태(Local State)
특정 컴포넌트 안에서만 관리되는 상태로, 다른 컴포넌트와 데이터를 공유하지 않는다. 보통 Form 데이터들이 지역 상태에 속한다.
컴포넌트 간 상태(Cross Component State)
여러 컴포넌트에서 관리하는 상태로, 모달이 적절한 예시다. 이 또한 Prop Drilling 방식으로 상태를 전달한다.
💡 Prop Drilling❓
props를 하위 컴포넌트로 전달하는 용도로 하나의 컴포넌트에서 다른 컴포넌트로 데이터를 전달하는 방식을 말한다. 이 과정에서 단순히 전달만을 위한 컴포넌트가 전달 단계에 포함될 수 있으며 전달 단계가 길어지면 prop 추적이 힘들어진다.
상태 관리의 필요성
- 한계: 데이터를 전달하고 싶은 두 개의 컴포넌트가 서로 부모/자식 관계가 아닌 이상 직접적인 전달이 어렵다. 그렇다고 모든 컴포넌트를 부모/자식 관계로 만들어서 Prop Drilling을 하도록 만들면 추적이 어려워진다.
초기에는 MVC 패턴으로 js 프레임워크를 활용했기 때문에 상태와 비즈니스 로직을 Container 컴포넌트에 몰아두고 View는 데이터를 props로 받아 뿌려주는 Container-Presenter(View) 패턴으로 개발했다. 하지만 양방향 데이터 이동이 가능한 MVC 패턴은 상태의 일관성을 보장하기 어려웠고 핸들링이 어려워 불필요한 Props Drilling이 발생했다.
이러한 한계를 극복하기 위해 Prop Drilling이 아닌 다른 방식의 상태 관리가 필요한데 이를 위한 여러 툴이 개발됐다.
상태 관리의 목적
→ 상태의 일관성, 데이터의 무결성을 위해 변경을 제한해 상태를 항상 같게 유지한다. React에서도 Single source of Truth(신뢰할 수 있는 단일 출처) 방법론을 채택해 사용하고 있다.
