목차

1. 주제 선정 이유

2. 상태관리란

• 상태관리의 정의
• 상태의 종류

3. React의 상태관리

• Context API
• Redux
• Reacoil 라이브러리

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 제공받은 전역상태를 받아서 사용하는 역할을 한다.

3-2. Redux

• Redux : 공식 문서에 따르면 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너라고 정의한다.
  이를 풀어 설명하면, 전역 상태를 관리하는 도구, 즉, 어플리케이션 전체에 대한 중앙 저장소 역할을 한다고 생각하면 된다.

• 'Store','Action', 'Reducer'로 구성되어 있다.
  Store는 전역상태를 저장하는 저장소 역할을 하며, 오직 Reducer를 통해서만 접근이 가능하다. 주로 index.js에 정의되며 Store는 오직 1개만 존재할 수 있다.
  Action은 Store에 저장된 상태의 변화를 Reducer에 명령하는 자바스크립트 객체이다. 변화를 주기 위해 dispatch라는 메서드를 사용하여 Reducer에게 전달된다.
  Reducer는 변화를 감지하여 상태를 변화시키는 역할을 하는 순수함수로서, 전역 상태를 변경하고 업데이트시킨다. 바닐라 자바스크립트의 '이벤트리스너'와 동일한 역할을 한다고 파악해도 좋다.
  다만, Redux의 경우, 상태관리를 할 때, 이전상태를 변경시키는 것이 아닌 새로운 상태의 객체를 생성하여 반환한다는 점을 명시해야한다.
  *순수함수 : 다른 외부의 상태를 변경하지 않으면서도, 어떤 동일한 인자에 대해 항상 동일한 값을 리턴하는 함수이다.

3-3. Recoil 라이브러리

• 앞서 언급한 Redux는 단방향의 흐름에서 상태관리가 용이하지만, 이를 위한 action, reducer와 같은 초기 세팅이 상당히 번거롭고 React와 잘 맞지 않는다는 여론이 주를 이루었다.

• React의 상태관리를 보다 React스럽게(hook을 전역으로 확장시킴) 하기 위해, 메타(전 페이스북)사에서 제작한 React 상태관리 라이브러리이다.

• Recoil은 atom과 selector라는 객체를 사용하여 상태를 관리한다.

• atom은 구독, 옵저버와 같은 개념을 생각할 필요없이 hook을 사용하듯이 사용하면 된다.
  hook를 사용했던 개발자라면 쉽게 사용할 수 있다.

• selector를 이용하면 리듀서 없이 복잡한 연산도 간단하게 할 수 있다.