왜 recoil, recoil 하는 건데??
다른 상태관리 라이브러리를 써봤다면, 바로 이해할 겁니다. 설정이 정말 많거든요. redux는 애초에, react 와 관련없는 라이브러리 였습니다. 그냥 javascript 에서 많이 쓰이는 상태관리 라이브러리 였고, react 에 상태관리 라이브러리가 필요해지자 나타난게, react-redux 였죠.
처음 redux 를 쓰면서 느낀 점은, 설정 자체도 어렵고, 매 프로젝트마다 설정 할 것도 많다는 거였습니다. 시행착오도 여러번 있어서, 공부하는 데 많이 애를 먹었던 거 같습니다.
recoil 소개
recoil 을 한마디로 표현하자면 다음과 같습니다.
A state management library for React
말 그대로 리액트를 위한, 상태관리 라이브러리로써, 초기 셋팅이 상당히 개선된 react 전용 상태관리 라이브러리 입니다.
Atoms
Atoms react의 state, props와 매우 유사합니다. 공식 문서에서도 Atoms 는 상태의 단위라고 설명하며, 값을 가져오거나, 변경하는 것이 가능합니다.
Atom 은 atom() 함수를 이용하여 생성할 수 있습니다.
const fontSizeState = atom({
key: 'fontSizeState',
default: 14,
});Atom 은 생성 시 고유의 key 값을 지정해주어야 합니다. 이 key 값을 기반으로 모든 컴포넌트에서 공유가 될 수 있습니다.
useRecoilState
리액트에서 활용한 useState() 개념과 동일합니다. 해당 컴포넌트에서 atom의 값을 변경하거나, 읽어올 수 있습니다. useState() 와 다른 점이라면, 상태가 컴포넌트 간에 공유가 가능하다는 점이겠네요.
function FontButton() {
const [fontSize, setFontSize] = useRecoilState(fontSizeState);
return (
<button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
Click to Enlarge
</button>
);
}또한 useRecoilState 는 useRecoilValue 혹은 useSetRecoilState 로 나누어, 상태의 값을 가져오기만 하거나, 혹은 업데이트만 하도록 나누어 사용하는 것도 가능합니다.
const fontSize = useRecoilValue(fontSizeState);
const setFontSize = useSetRecoilState(fontSizeState);
selectors
selector 는 상태에서 파생된 데이터로, 다른 atom에 의존하는 동적인 데이터를 만들 수 있게 해줍니다. selector는 순수함수로서 atom 이나 또다른 selector를 이용해서 새로운 변경된 데이터를 전달하는 것이 가능합니다. 해당 selector 상위의 개념이 변경되는 경우, selector 역시 이에 따른 변경된 값으로 바뀌게 됩니다. (이 때 해당 selector 를 사용하는 컴포넌트 리렌더링 됩니다.)
vue의computed유사한 개념으로 이해했습니다.
const fontSizeState = atom({
key: 'fontSizeState',
default: 14,
});const fontSizeLabelState = selector({
key: 'fontSizeLabelState',
get: ({get}) => {
//get을 통해 atom값을 가지고 올 수 있다.
const fontSize = get(fontSizeState);
const unit = 'px';
return `${fontSize}${unit}`;
},
});fontSizeLableState 는 fontSizeState 를 통해 fontSize 값을 가져오고 있습니다. 만약 fontSizeState의 값이 변경되는 경우, selector 역시 영향을 받아 변경됩니다.
그래서 왜쓰냐면
store필요 없이atom만 만들어주면 상태 공유가 가능해집니다.- 리액트 훅을 사용하듯 사용하면 됩니다. (심지어 얘도
use_로 시작합니다) - 그래서 그런지 쉽게 사용할 수 있습니다.
selector를 이용하면reducer없이 파생 연산도 가능합니다.
주의
recoil은 정식 릴리즈 된 라이브러리는 아닙니다. (현시점 : v0.7.5)
실제 현업에서 사용하는데는 당연히 주의가 필요합니다.
참조
recoil 왜 만든 건데? : https://velog.io/@wooder2050/%EB%A6%AC%EC%BD%94%EC%9D%BCRecoil%EB%8A%94-%EC%99%9C-%EB%A7%8C%EB%93%A0-%EA%B1%B4%EB%8D%B0
Recoil - 또 다른 React 상태 관리 라이브러리? : https://ui.toast.com/weekly-pick/ko_20200616
recoil - 공식문서 :
https://recoiljs.org/ko/docs/basic-tutorial/intro
