43. Context api, Redux, Mobx, SWR

Context api, redux, mobx, swr

위의 것들은 리액트의 상태를 관리하는 라이브러리들이다. 그럼 각각의 특징을 살펴보자.

 

1. Context api

context api는 구성요소 트리에서 쉽게 전달할 수 있는 전역 데이터를 생성하고 이것들은 데이터를 전달하기 위해서 props가 있는 구성요소 트리를 통과하난 props drilling을 해결할 수 있다. 사용이 간편하지만 속도가 느리다.(값이 변경되면 사용 여부와 상관없이 그 값을 사용하는 모든 걸 리렌더링 하기 때문에)

https://ko.legacy.reactjs.org/docs/context.html

Context – React

 

2. Redux

리액트 앱의 모든 상태를 하나의 전역화된 상태 객체로 추상화한다. 이로인해서 상태 개체의 일부가 바뀌어도 해당 상태를 사용하는 것들만 리렌더링이 일어난다. 또한 상태관리를 하는 라이브러리들 중에서 가장 큰 커뮤니티를 지원하는 것도 장점으로 들 수 있다. 하지만 구조가 복합하며 저장소가 JSON파일로 변경될 수 있다는 단점 또한 가지고 있다.

https://ko.redux.js.org/

Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux

3. Mobx

Mobx는 @observable을 사용하여 구독을 통해서 변경 사항을 자동으로 알아내고 이로 인해서 Redux같이 오버헤드를 붙일 필요가 없기 때문에 Redux에 사용구가 적다는 장점으로 숙달에 더욱 용이하지만 업데이트 중 Mobx의 상태가 덮어써져서 구현하기에는 쉽지만 저장소 예측이 힘들어서 테스트, 유지관리가 어렵다.

 

https://mobx.js.org/README.html

README · MobX 🇺🇦

 

4. SWR

SWR은 처음 캐쉬에서 받은 데이터를 먼저 리턴하고 그 후 페치를 통해 얻은 데이터를 마지막으로 리턴해준다. 이로 인해서 데이터 캐싱이 가능하며 자동으로 재검증이 가능하다는 장점이 있다.

 

https://swr.vercel.app/ko

데이터 가져오기를 위한 React Hooks – SWR