리액트 상태관리 Context API, Redux, React Query

지금 수준에서는 내용을 이해하기 어렵다. 그래서 이번에는 간단하게 정리해보고, 나중에 다시 하나씩 정리해보려한다.

리액트 상태관리

상태란?

리액트 공식 문서에 내용을 요약해보자면 상태는 컴포넌트 내부에서 관리되며 어플리케이션의 렌더에 영향을 미치는 플레인 자바스크립트 객체이다.
즉 화면에 영향을 주는 자바스크립트 객체라 할 수 있다. 보통은 변화하는 데이터라고 일컫는다.

상태의 종류

지역상태 : 특정 컴포넌트 안에서만 관리되는 상태. 다른 컴포넌트들과 데이터를 공유하지 않는다. 예를 들면 form 데이터들이 있다. (input, select 등)

컴포넌트 간 상태 여러가지 컴포넌트에서 관리되는 상태를 나타낸다. 이번 과제에서 사용한 방식이다.
다수의 컴포넌트에서 쓰이고, 또 영향을 미치는 상태를 뜻한다.
보통 상위 컴포넌트에서 하위 컴포넌트로 props을 넘겨 해당 컴포넌트까지 전달되도록 하는 Prop Driling 방식을 필요로 한다.

전역 상태 프로젝트 전체에 영향을 끼치는 상태

Prop Drilling?

오직 하위 컴포넌트로 전달하는 용도로 중간 컴포넌트를 거치며 데이터를 전달하는 과정.

상태관리 필요성

부모 자식 관계가 아닌 두 컴포넌트끼리 데이터를 교환하기 위해서는 겹치는 부모 컴포넌트로 보내고 다시 자식 컴포넌트로 전달해야한다.
이렇게 prop drilling이 길어지면 prop의 출처 확인이 어려워진다.

Context API, Redux , React Query

Context API

공식 페이지

리액트에서 만든 React 컴포넌트 트리 안에서 전역 상태를 공유할 수 있도록 만들어진 방법이다.
Context API는 "전역 상태관리 도구"라고 말하기엔 애매한 부분이 있는데, Context API는 아무것도 관리하지 않기 때문이다. 실질적인 상태관리는 useState, useReducer를 통해 일어난다.
즉, 초기 값 저장, 새로운 데이터로 상태를 업데이트 하는 등의 행위를 직접 관리하지 않고, 단순히 이미 존재하는 상태를 다른 컴포넌트들과 쉽게 공유할 수 있게 해주는 역할을 한다.

주로 현재 로그인한 유저, 테마, 선호하는 언어 등을 전달 할 때 사용한다.
데이터 전달이 많아지면 지저분해 보인다?

Redux

공식 홈페이지

Redux는 전역 상태관리를 위한 도구이다. 어플리케이션 전체에 대한 중앙 저장소 역할을 한다.
"액션"이라는 이벤트를 사용해서 어플리케이션의 상태를 우리가 예측 가능한 방식으로 업데이트 할 수 있게 도와준다.
Redux는 라이브러리이기 때문에 다양한 UI Framework / Library들과 함께 사용이 가능하다. 또한 React 뿐만아니라 Vue나 Vanilla JS 등에서도 사용이 가능하다.

React Query

공식 홈페이지

전역 상태 관리 라이브러리라고 보기보다는, 서버와 클라이언트 간 비동기 작업을 쉽게 다룰 수 있게 도와주는 라이브러리다. 서버 상태를 관리하는 라이브러리라고 생각하면 된다. 프론트엔드에서 어려운 부분 중 하나가, 이렇게 비동기를 통해 서버 상태를 가져오고 관리하고 업데이트 하는 부분인데,그 부분을 쉽게 해준다.

보통 Redux와 같은 전역 상태관리 라이브러리들이 클라이언트의 상태에 대해서는 잘 동작하지만, 서버 상태에 대해서는 그렇게 동작하지 못하기 때문에 (명시적으로 fetch를 해야지 서버의 데이터를 최신으로 반영한다거나, 많은 컴포넌트에서 최신 데이터를 받아오기 위해 여러번 fetch를 하는 등의 최적화가 어려워서) , 이와 같은 서버상태관리 라이브러리가 나타나게 되었다고 볼 수 있다.

차이?

취향이 많이 갈리는 것 같다.
다만 어느 정도 기준은 알면 선택에 도움이 될 것 같다.

• Context API: 전달 메커니즘 , 전달된 props를 사용하지 않고 공유 트리 내의 구성 요소 간에 데이터를 전달할 수 있습니다.

• Redux: 복잡한 상태 트리거 및 보다 복잡한 데이터를 처리하는 완전한 상태 관리 솔루션입니다. 또한 재렌더링이 처리되는 방식이 더 강력합니다.

• React Query: 상태를 클라이언트에서 서버/백엔드로 이동하는 상태 관리 도구입니다. 여러 장치에서 상태 변경을 트리거하는 하나의 앱에 유용합니다.

Query + recoil 등 다양한 조합도 있다.

• 단순 전역 상태 관리만 있어도 된다면 Context API, 디버깅이나 로깅 등의 상태 관리 외의 기능이나 미들웨어가 필요하다면 Redux를 사용하는 것이 좋다고 여겨집니다.