Recoil이란?
: React 전용 상태관리 라이브러리
2가지 개념으로 이루어져있다. (Atoms, Selectors)
yarn add recoil
0. recoilRoot
recoil state를 사용할 컴포너트는, RecoilRoot 태그로 해당 부분들을 감싸주어야함.
모든 곳에서 보통 사용하니까, App.ts에서 적용시켜주는 것이 일반적
import React from 'react';
import { RecoilRoot } from 'recoil'
function App() {
return (
<RecoilRoot>
</>
</RecoilRoot>
);
}
1. Atoms
: 상태의 단위이며, 업데이트와 구독이 가능!
- react의 useState와 유사 BUT 이 상태가 다른 컴포넌트간에 공유될 수 있다는 차이가 있음.
- atom이 업데이트되면, 구독하고 있는 모든 컴포넌트는 새로운 값을 반영하여 다시 렌더링 됨.
예시는 아래와 같다.
import { atom } from 'recoil';
const age = atom({
key: 'age',
default: 0
});
export { age };
이제 이렇게 atom으로 지정한 age는 앱 내에서 모든 곳에서 접근이 가능해지는 것!
- key : 해당 atom을 식별하는 고유한 식별자.
- 각 atom은 유일한 key를 가져아함
- key는 보통 문자열로 저장됨
- 해당 atom을 조회하거나 변경할때, 이 key를 사용하여 Recoil이 해당 atom을 식별하게 됨.
1.1. useRecoilState
아래와 같이 다른 파일에서 age를 사용 가능하다.
import { useRecoilState } from 'recoil';
import { age } from '....';
// atom의 state를 (1)get. (2)set 할 수 있음.
const [ageState, setAgeState] = useRecoilState(age);- 컴포넌트에서 이러한 atom을 읽고 쓰려면, useRecoilState라는 훅을 사용함!
- 이거는 React의 useState와 비슷 BUT 상태가 컴포넌트 간에 공유될 수 있다는 차이를 가지고 있음!
∴ 해당 컴포넌트를 바꾸면 다른 곳에서 해당 atom을 사용하고 있는 부분도 다 함께 변화함!
1.2. useRecoilValue, useSetRecoilValue
1.1에서 사용한 useRecoilState는 atom의 값을 (1) get 과 (2) set 기능을 모두 지원해줌.
BUT 이 기능을 분리해서 사용하는 것도 가능!!
function TextInput() {
// atom을 get, set 모두 해주는 함수 useRecoilState
// const [text,setText] = useRecoilState(textState);
// atom을 get해주는 함수 useSetRecoilView
const text = useRecoilValue(textState);
// atom을 set해주는 함수 useSetRecoilValue
const setText = useSetRecoilValue(textState);
const onChange = (event) => {
setText(event.target.value);
};
...
}
2. Selectors
: atoms나 다른 selectors를 입력으로 받아들이는 순수 함수
-
상위의 atoms 또는 selectors가 업데이트 된다면, 하위의 selector 함수들도 다시 실행됨!!
-
상태를 기반으로 하는 파생 데이터를 계산할 때 사용
-
WHY?
최소한의 상태 집합만을 atoms에 저장하고, 다른 모든 파생되는 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산해서, 쓸모없는 상태의 보존을 피하려고.
import { selector, useRecoilValue } from 'recoil';
import { age } from '....';
const isChild = selector({
key: 'childage',
get: ({ get }) => {
const state = get(age);
return state < 10;
}
})