0. Recoil에 대한 조사

[123000l]

상태 관리 라이브러리 중 하나다. Recoil 외에도 redux, Mobx 등이 있다. Recoil은 react에 최적화 되어 있다. npm install recoil로 리코일을 설치하고 사용한다. recoil state를 사용하는 컴포넌트는 로 감싸야 한다.

1 Atom

컴포넌트끼리 공유 가능한 가장 작은 단위의 state이다. Recoil에서 제공하는 데이터 상태의 단위다.

useState로 만든 상태와 개념적으로는 비슷하지만, 다른 컴포넌트(같은 페이지 안의 다른 컴포넌트)와 상태를 공유할 수 있다는 차이점이 존재합니다. atom 으로 만든 상태를 읽는(값을 구독한) 모든 컴포넌트는 atom의 상태가 변경되면 재렌더링 된다.

• key : 고유한 키값. 보통 해당 atom을 생성하는 변수명으로 지정한다.
• default : atom의 초기값을 정의한다. 정적인 값(int, string 등), 다른 atom의 값으로 설정할 수 있다.

예시

import { atom } from ‘recoil’;

  const posting = atom<string>({

  key: “posting”,

  default: “”,
})

2 selector

atom 또는 다른 selector로 구성한 순수함수이다. 상위의 atoms 또는 selectors가 업데이트 되면 하위의 selector 함수도 다시 실행된다. atom처럼 컴포넌트가 이를 구독할 수 있다.

• key: 고유한 키값.
• get : selector 순수 함수.

3 전역상태 관련 Hooks

• useRecoilState() : 상태값을 가져오고 수정할 수 있다.

• useRecoilValue() : 상태값을 가져올 수 있다.

• useSetRecoilState(): 상태값을 수정할 수 있다.

• useResetRecoilState() : 상태값을 초기값으로 리셋한다.

[gomjellie]

@123000l TMI인데

대신에 아래처럼 언어를 지정해주면 더 예쁘게 보여집니다