1. 주제 선정 이유

React라이브러리를 사용하다보면 상태관리가 필수이며 그에 따른 각종 기능들을 숙지하고 있어야한다. 이에 대해 알지 못하면 React를 사용하지 않는 수준이며, 협업을 하는데 있어 큰 지장이 되기에 이번 기회에 상태관리에 대한 정확한 정의를 학습하고, React의 상태관리 방법에는 어떤 것들이 있는지 살펴보도록 하자.

2. 상태관리란

2-1. 상태관리의 정의

• 상태(State) : 컴퍼넌트 내부에서 관리되며 어플리케이션의 렌더에 영향을 미치는 자바스크립트 객체를 의미. 즉, 변화하는 데이터라고 이해하면 된다. (ex, 쇼핑몰 사이트에서 구매할 물건의 수량을 늘리고 줄이는 행위를 상태가 변화한다고 한다.)
• 상태관리 : 상태는 어는 컴퍼넌트에서나 일관되어야 한다. 이를 데이터의 무결성이라 한다. 왜냐하면, 상태가 컴퍼넌트마다 다르다면, 유저나 관리자가 받아들이는 데이터에 차이가 생겨 소통에 차질이 생기기 때문이다. 따라서 상태를 일관되게 관리해야하며, React의 경우, **신뢰할 수 있는 단일 출처(동일한 데이터는 항상 같은 곳에서 가져온다)**라는 방법론으로 상태를 관리하고 있다.

2-2. 상태의 종류

• 지역상태(localState) : 특정 컴퍼넌트 안에서만 관리되는 상태를 의미한다. 이는 주로 작은 프로젝트처럼 좁은 영역에서만 관리되는 데이터들이다.
• 컴퍼넌트 간 상태: 다수의 컴퍼넌트에서 사용되고 영향을 주는 데이터들을 의미한다. 대표적인 예시로 여러 컴퍼넌트가 동시에 사용하는 모달창 등이 있다. 2개 이상의 컴퍼넌트간에 상태를 주고 받을 경우, 상위 컴퍼넌트에서 하위 컴퍼넌트로만 상태를 전달하며, 이를 Props Driling이라 한다.
• 전역 상태(globalState) : 프로젝트 전체에 영향을 끼치는 데이터를 의미한다. 대표적인 예로, 모든 컴퍼넌트에서 사용되는 페이지의 헤더 컴퍼넌트 등이 있다.
• 상태관리가 필요한 이유: 걱 컴퍼넌트가 부모자식 관계로 되어있지 않은 이상 각 컴퍼넌트간의 직접적인 데이터 전달은 어렵우며, 구조가 복잡하여 Props Driling이 많아지면 Props의 출처를 찾기 어려워기 때문에 이를 관리해줘야 한다.

3. React의 상태관리

3-1. Context API

• Context API : React 컴포넌트 트리 안에서 전역 상태를 공유할 수 있도록 만들어진 방법이다. 명칭은 API이기는 하지만, 실질적인 관리는 API가 아니라 useState를 통해 이루어진다.
• useState() : cosnt [state, setState] = useState()의 형태로 구성되어 있다. 앞에서서부터 state라는 상태변수와 상태에 변화를 주는 setState라는 함수가 있다. useState()의 파라미터에는 초기 state값이 들어가며, 이후 setState를 통해 state의 값에 변화를 주는 방식으로 상태를 관리한다. useState()는 상태를 새로 추가하거나 삭제하는 것이 아니라 단순 비교를 통해 상태를 업데이트 시키는 원리로 작동한다. 즉, 동일한 데이터의 key값이면 키의 value값의 차이를 비교하여 최신의 value값으로 갱신하며 상태를 관리한다. 이는 중간에 있는 요소들에게 props를 넘기지 않고도 데이터를 가져다 사용할 수 있기에 props Drilling을 피할 수 있으며, 주로 전역적으로 쓰이는 데이터들을 사용할 때 자주 사용된다.
• useEffect() :
• context API의 구조 : context, provider, comsumer 로 구성 context : 전역상태를 저장하는 곳으로 , 내부에는 provider와 consumer로 구성되어있다. provider : 전역상태를 제공하는 역할을 한다. 주로 Root Component(index.js / app.js)에서 정의된다. consumer 제공받은 전역상태를 받아서 사용하는 역할을 한다.