전역 상태 관리 라이브러리 'Recoil '
React를 위한 전역 상태관리 라이브러리 중 하나이다.
Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다.
Atoms
- 컴포넌트가 구독할 수 있는 상태의 단위
- recoil에서의 상태를 나타냄
Selectors
- atoms 상태 값을 동기 또는 비동기 방식을 통해 변환한다.
- 다양한 atoms를 조합하거나 가공하여 새로운 값을 반환할 수 있다.
Recoil의 장점은 뭘까?
전역 상태 관리 라이브러리인 Redux에 비해 보일러 플레이트 코드를 많이 작성하지 않아도 되기 때문에 상대적으로 코드의 양이 줄어들게 된다.
직관적이면서 간단한 구조 덕분에 좀 더 쉽게 전역 상태를 관리할 수 있다.
Recoil 사용해보기
패키지 설치
npm install recoil
yarn add recoil
1) RecoilRoot로 하위 컴포넌트를 감싸준다.
import Router from "./shared/Router";
import {RecoilRoot} from "recoil";
function App() {
return (
<RecoilRoot>
<Router />
</RecoilRoot>
);
}
export default App;2) 전역 상태 관리를 위한 변수 구현
src > recoil > state.js
- 키값과 초기값을 설정한다.
- 새로고침하면 데이터가 날라가는 것을 방지하기 위해 storage에 저장해준다.
import {atom} from 'recoil'
export const globalState = atom({
key: 'globalState',
default: 'this is global state',
storage: sessionStorage
})3) 전역 상태 사용하기
- 데이터를 읽고 쓸 때
import { useRecoilState } from 'recoil';
const [myState, setMyState] = useRecoilState(globalState);- 데이터를 읽기만 할 때
const myState = useRecoilValue(globalState);- 데이터를 변경하기만 할 때
const setMyState = useSetRecoilState(globalState);- 데이터를 초깃값으로 초기화할 때
const resetState = useResetRecoilState(globalState);