State

State란?

state는 plain Javascript Object that influences output of render and is managed within the component
상태는 컴포넌트 내부에서 관리되며 어플리케이션의 렌더에 영향을 미치는 플레인 자바스크립트 객체이다. 축약하자면 “어플리케이션의 화면에 영향을 끼치는 자바스크립트 객체”
이것을 통칭해 “변화하는 데이터” 사용자와의 인터랙션을 통해 동적으로 계속해서 변화하는 데이터
이런 상태들은 일관적이어야한다. 즉 서로 다른 컴포넌트에서 동일한 상태를 다룬다면, 그 출처가 같아야한다는 것. 그러므로 데이터의 무결성은 중요함.
만약 서로 다른 여러개의 컴포넌트들이 어떤 동일한 상태를 다루면, 그 데이터의 정확성을 보장하기 위해 데이터의 변경을 제한해 데이터의 상태를 항상 같게 유지해야한다.(useState를 통해서만 state를 변경시켜야하는 이유)

state의 종류

1. 지역상태

• 지역상태는 특정 컴포넌트 안에서만 관리되는 상태.
• ex) input, selectbox, 사용자의 입력값을 받는 경우 (대부분 Form 데이터들이 지역상태에 속함)

2. 컴포넌트 간 상태

• 여러가지 컴포넌트에서 관리되는 상태. 다수의 컴포넌트에서 쓰이고, 영향을 미치는 상태.
• ex) modal
• 상위 컴포넌트에서 하위 컴포넌트로 prop으로 넘겨 해당 컴포넌트까지 전달되도록 prop drilling방식이 필요함.

3. 전역상태

• 전체에 영향을 끼치는 상태.
• ex) 유저 기능
• 이 또한 prop drilling방식으로 부모에서 자식으로 데이터 전달.

상태관리는 왜 필요한가?

서로 다른 두 컴포넌트에 같은 데이터가 필요하다고 할 때, 각 컴포넌트가 부모자식 관계로 되어있지 않은 이상, 각 컴포넌트 간의 직접적인 데이터 전달이 어렵다

상태관리를 위한 툴

Context API, Redux, React Query 등 ..
참조
https://mingule.tistory.com/74