Recoil 가이드 1편 : atom

개념 요약

atom이란?

컴포넌트 상태를 중앙집중식으로 관리하기 위한 상태의 최소 단위입니다.
(Source of Truth)

TMI 1. atom은 크게 key와 value 2가지로 구성됩니다.

구독 (Subscription)

구독이란?

컴포넌트에서 atom을 가져다 쓰는 것을 구독이라고 합니다.

수정 시 해당 atom을 구독 중인 모든 컴포넌트가 다시 렌더링됩니다.

사용 방법

atom 생성하기

atom의 상태 정보를 식별할 key와 default 값을 지정해 atom을 생성하고 변수에 담아주면 끝!

const themeState = atom({
  key: 'themeState',
  default: 'light'
});

atom 조회하기

Read only

useRecoilValue(atom 객체)

useRecoilValue() 함수에 atom 객체를 담으면 상태 값을 가져올 수 있습니다.

const theme = useRecoilValue(themeState);

atom 조회 + 변경하기

useRecoilState(atom 객체)

useRecoilState() 함수에 atom 객체를 담으면 상태 값과 Setter를 함께 가져올 수 있습니다.

const [theme, setTheme] = useRecoilValue(themeState);