2020년에 소개된 Facebook에서 실험용으로 만든 React 상태 관리 라이브러리
Recoil은 state를 업데이트할때 공통 부모로 상태를 계속 끌어올리면서 너무 큰 dom tree가 계속해서 re-render 되고 상태가 만들어지고 리덕스를 사용하는 유저들의 불만이 꾸준히 증가하면서 페이스북이 오직 리액트를 위한 API와 동작을 최대한 React스럽게 유지하고 개선하려고 발표한 라이브러리다.
Recoil을 만든 Dave McCabe가 한 말에 의하면
"Well, I know that on one tool we saw a 20x or so speedup compared to using Redux. This is because Redux is O(n) in that it has to ask each connected component whether it needs to re-render, whereas we can be O(1)."
"글쎄요, 한 툴에서 Redux를 사용할 때보다 20배 정도 속도가 빨라진 것으로 알고 있습니다. 이는 Redux는 O(n)이기 때문에 연결된 각 구성 요소에 재렌더가 필요한지 물어봐야 하는 반면 우리는 (Recoil은) O(1)이기 때문이다.
Recoil이 O(1)이라는 말은 데이터가 저장되어 있는 atom을 수정할때 그 atom을 바라보는 컴포넌트들만
Atom은 어떤 컴포넌트에서도 사용하고 수정할수 있는 상태다. 만약 Atom이 업데이트 된다면 그 Atom을 바라보고 있는 컴포넌트들이 re-render 된다.
// 출처: Recoil 공식문서
const textState = atom({
key: 'textState', // unique ID (with respect to other atoms/selectors)
default: '', // default value (aka initial value)
});
Atom은 위와 같은 형태로 정의한다. key
에는 다른 컴포넌트에서 사용할 state의 이름, default
에는 state의 초기값을 설정한다.
이렇게 정의한 atom을 컴포넌트에서 사용할때는 설정해놓은 key값과 useRecoilState
를 import 해와서 사용한다.
import { textState } from '/state.js'
import { useRecoilState } from "recoil";
// 출처: Recoil 공식문서
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>
);
}
참고:
https://recoiljs.org/
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
https://ui.toast.com/weekly-pick/ko_20200616
https://www.ridicorp.com/story/how-to-use-redux-in-ridi/