Recoil

Recoil

Recoil은 Prop을 여러개 거칠 필요없이 필요한 Prop에만 atom을 전달해 주는 기능을 한다.

value가 필요한 component만 그 value를 가진다는것

설치
npm install recoil

RecoilRoot
recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot 가 필요하다.
Root 컴포넌트가 RecoilRoot를 넣기에 가장 좋은 장소다.

Atom
Atom은 상태(state)의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다.
atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다.
그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 리렌더링 되는 결과가 발생할 것이다.
atom(): 쓰기 가능한 state를 나타내는 atom를 만든다.

const textState = atom({
key: 'textState', // 유니크한 ID(다른 atom/selector와 관련하여)
default: '', // 기본값 (초기값)
});

useRecoilState()
컴포넌트가 atom을 읽고 쓰게 하기 위해서는 useRecoilState()를 아래와 같이 사용하면 된다.
ex) const [text, setText] = useRecoilState(textState);

React의 setState와 같은 방식으로 작동한다.