Recoil

공식문서 스터디

RecoilRoot

Recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 있는 RecoilRoot가 필요함
루트 컴포넌트에 적용시키는게 가장 좋음

Atom

상태의 일부를 나타내고 어떤 컴포넌트에서나 읽고 쓸 수 있고 Atom의 값을 읽는 컴포넌트들은 Atom을 모두 바라보고 있게 되는데, 이건 Atom에 변화가 있을때 값을 참조하고 있는 컴포넌트들은 모두 재 렌더링이 발생함
@type: Atom에 제네릭을 넣으면 default의 값의 타입을 지정 할 수 있음

interface AtomType {
  test: string;
}

atom<AtomType[]>({ key: "", default: [{type:"1번입니다"},{type:"2번입니다."}] })

Selector

Selector는 Atom을 인자로 받거나, Selector들을 인자로 받아 그 결과를 업데이트 하거나 사용 할 수 있는 순수 함수임

useRecoilValue

주어진 Recoil 상태의 값을 리턴하는데 사용된 컴포넌트는 Atom의 추적 대상이 되어 변경되면 재랜더링 대상이됨

useRecoilState

Atom에 저장되어있는 상태값을 가져와서 사용 또는 변경이 가능하게 하는 함수 ( useState와 비슷하다고 볼 수 있음 )
만약 상태값의 변경만 원한다면 아래처럼도 사용이 가능

const test = useSetRecoilState(atomValue);

test(변경할 atomValue)