리액트에 상태를 관리해주는 것에는 다양한 것들이 있다. 다양한 것에는 Context api, redux, mobx, swr가 있다.
Context api
Contex API는 React 16.3버전에서 출시된 옵션이다. 컨텍스트 API는 구성 요소 트리에서 쉽게 전달할 수 있는 전역 데이터를 생성한다. 이것은 데이터를 전달하기 위해 props가 있는 구성 요소 트리를 통과해야 하는 "props Drilling"의 대안으로 사용되고 있다.
import { createContext, useState } from 'react';
const CountContext = createContext({
count: 0,
plusCount: () => {},
});
interface Props {
children: JSX.Element | JSX.Element[];
}
const CountProvider = ({ children }: Props): JSX.Element => {
const [count, setCount] = useState(0);
const plusCount = (): void => {
setCount(count + 1);
};
return (
<CountContext.Provider
value={{
count,
plusCount,
}}>
{children}
</CountContext.Provider>
);
};
export { CountContext, CountProvider };createContext를 통해서 context를 생성하고 그것에 상태값을 설정해준다. 그리고 Provider을 통해서 그 값들을 어는 컴포넌트에서나 사용이 가능하게 해준다.
Redux
context api와 마찬가지로 리덕스를 사용하면 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다.
리덕스는 리듀스 액션 디스패치를 통해서 상태를 관리해준다.
상태 개체의 일부가 업데이트되면 해당 상태를 사용하는 구성 요소만 다시 렌더링 된다.
Redux는 자주 업데이트되는 앱이 있을때 사용하면 더욱 효율적이다.
저장소가 업데이트되면 변경되지 않고 업데이트된다. 이전 저장소는 새 상태 값으로 복사된다.
이를 통해서 이전 업데이트 및 업데이트 기록을 따라 이동하는 시간과 같은 항목을 추적해 디버깅에 도움을 줄 수 있다. 이렇게 한다면 Redux를 더욱 쉽게 테스트 + 유지 보수 관리 및 확장을 할 수 있다.
하지만 많은 상용구와 복잡한 구조를 가진다.
설치해야할 타사 라이브러리 존재하고 그만큼 번들 크기가 증가한다.
불변 저장소의 단점으로 저장소가 거대한 json 파일로 빠르게 변할수 있다는 점과 작성해야할 코드가 상대적으로 많아진다.
mobx
MobX는 상태 관리를 간단하게 만들기 위한 기능적 반응 프로그래밍(예: @observable)을 적용하는 상태관리 라이브러리이다.
Mobx는 @observable을 사용하여 구독을 통해 변경 사항을 자동으로 추적한다.
이것은 Redux 개발자가 리듀서에서 데이터를 복제하고 변경 불가능하게 업데이트하는 오베헤드를 제거한다.
Redux에 비해서 상용구가 적다. 그만큼 배우기 쉽다.
MobX는 여러 저장소를 지원하지만 Redux는 단일 저장소를 허용한다. 이를 통해서 UI상태와 도메인 상태(서버 API 데이터)에 대한 별도의 저장소를 가질 수 있다.
UI 상태가 별도로 유지되기 떄문에 도메인 상태를 서버 데이터와 일치하게 유지하고 서버에 연결하는 것을 간단하게 만들 수 있다.
하지만 업데이트 중에 MobX 상태를 덮어쓴다. 구현하기에는 쉽지만 저장소가 훨씬 덜 예측 가능하기 때문에 테스트 및 유지 관리가 어려울 수 있다.
SWR
SWR은 Next.js에서 개발한 zeit 그룹에서 사용하는 라이브러이다.
SWR은 맨처음 cache(캐시)로 부터 받아온 데이터 즉 오래된 정보를 먼저 리턴 해주고 그 다음 fetch를 한다음 마지막으로 업데이트된 데이터를 다시 리턴해준다. 이러한 로직을 통해서 UX의 향상을 만들어 낼 수 있다.
데이터가 캐싱된다. SWR은 자동으로 재검증을 해준다.
page에 re-focus하던가 tab을 변경했을 때 ,SWR은 자동으로 데이터를 재검증한다.
이로써 최신 상태로 데이터를 즉시 동기화하는 데 유용하다.
오래된 모바일 탭 또는 절전 모드가 된 노트북과 같은 환경에서 데이터를 새로 고치는 데 유용하다.
