지난 달, Facebook에서 React state 관리 라이브러리를 발표했다.
문서에 Motivations를 보면 Global state, code splitting 등의 여러가지 이유가 적혀있는데, 그 중 가장 눈에 띄는 것은 concurrent mode와 보일러플레이트의 최소화였다.
다른 것들은 사실상 그동안 사용해온 Redux나 Mobx로도 충분히 해결 가능한 부분인거 같고, 위에 두 가지에서 Recoil이 가지는 의의가 클 거 같다.
React 팀에서 심혈을 기울여 만들고 있다고 알려진 concurrent mode가 나온다면, 기존의 외부에 존재하는 store가 리엑트의 스케쥴러에 접근하는 것은 쉽지 않아, Recoil이 필요할 거라고 한다.
또, Redux 같은 것들은 비동기 처리를 위해 또 다른 라이브러리를 사용해야하고 state 맵핑 과정에서 번잡하게 느껴지는 보일러플레이트가 존재하는데, Recoil 같은 경우 비동기 처리도 내장되어있고, api 자체가 굉장히 단순화 되어있다.
간단하게 살펴보면,
Atom은 조각 단위의 state다.
어떤 컴포넌트에서든 정의가 가능하고, 어떤 컴포넌트에서든 구독이 가능하다. atom 값이 변하면 atom을 구독하고 있는 모든 컴포넌트에 렌더링이 발생하게 된다.
const textState = atom({
key: 'textState', // unique ID (with respect to other atoms/selectors)
default: '', // default value (aka initial value)
});
function CharacterCounter() {
return (
<div>
<TextInput />
<CharacterCount />
</div>
);
}
function TextInput() {
const [text, setText] = useRecoilState(textState);
const onChange = (event) => {
setText(event.target.value);
};
return (
<div>
<input type="text" value={text} onChange={onChange} />
<br />
Echo: {text}
</div>
);
}Selector는 atom이나 selector를 불러와 state 값을 토대로, 원하는 값을 구해 반환한다.
atom과 마찬 가지로 모든 컴포넌트들이 구독할 수 있고, 값 변경시 렌더링 된다.
vuex의 getter 느낌!
const charCountState = selector({
key: 'charCountState', // unique ID (with respect to other atoms/selectors)
get: ({get}) => {
const text = get(textState);
return text.length;
},
function CharacterCount() {
const count = useRecoilValue(charCountState);
return <>Character Count: {count}</>;
}
});
+
아직 실험 단계로 실제 프로덕트에 쓰일 단계는 아니지만, 개인적으로 처음 오픈소스에 기여하는 경험을 하게 해준 아이라 정이 많이 가는 거 같다. 단순 오탈자 수정이었지만 짜릿짜릿한 경험이었다.
이 아이가 어서 무럭무럭 자랐으면 좋겠다!
Resource
https://recoiljs.org/docs/introduction/motivation
https://ui.toast.com/weekly-pick/ko_20200616/