context api, redux, mobx, swr

1. Context API

React에서 부모가 가지고 있는 State 데이터를
최하위에 있는 자식 컴포넌트에 props로 넘겨주려하면
중간 중간에 있는 모든 자식 컴포넌트에게 넘겨줘야한다.

최하위 컴포넌트로 State를 보낼 뿐인데
그 중간 과정이 너무 귀찮고 번거롭다.

Context API는 이러한 과정 없이
가장 최상위에서 모든 State들을 관리하여
어떠한 컴포넌트든 중간에 props를 넘겨주는 작업 없이
State를 가져올 수 있다.

Context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

2. 특징

Context API

• React에서만 사용할 수 있다.
• Entry 파일(root)에서 구성한 Provider를 내려주는 형식이다.
• 사용하고자 하는 컴포넌트에서 작성한 Dispatch와 State를 꺼내 사용한다.
• reducer를 여러 개 만들면 Provider에서 여러 단계로 만들어 사용할 수 있다.

Redux

• React, Vue와 같은 프레임워크 환경에서 사용할 수 있다.
• 상태를 저장하는 Store를 따로 가지고 있다.
• thunk, saga와 같은 미들웨어를 추가적으로 사용하여 구성할 수 있다.
• Redux devtool extension을 사용하면 상태에 대한 디버깅이 가능하다.
• 전역 상태 관리 외에도 로컬스토리지 상태 저장, 버그리포트첨부 기능 등의 기능들을 사용할 수 있다.

Mobx

• React에 종속적인 라이브러리가 아니다.
• Redux와 다르게 store에 제한이 없다.
• Redux에서 해줘야했던 action 선언, connext, mapStateToProps, mapeDispatchToProps등 번거로운 작업들을 데코레이터로 간단히 대체할 수 있다.
• Mobx는 절대적으로 필요한 경우에만 state를 변경한다.
• Typescript를 기반으로 만들어졌다.

SWR

• Websocket 만큼 정확한 Realtime은 아니지만 polling 방식을 이용해 그에 준하게 적절한 타이밍에 데이터를 갱신한다.
• SWR은 데이터를 fetch하는 방식에 관여하지 않는다. 이 방법은 개발자가 정의할 수 있기 때문에 Rest API, GraphQL 어느 방식이든 이용가능하다.
• SWR은 서버의 데이터를 갱신하고 이를 컴포넌트에게 시기적절하게 제공해 주는 데에만 관심을 가진다.

참조1
참조2
참조3