[전역상태관리] Recoil 사용하기

김서현·2023년 2월 21일
0

프론트엔드

목록 보기
1/4
post-thumbnail

공식 문서로 공부하면서 내가 알아보기 쉽게 정리하는 Recoil 사용법!

설치

npm install recoil

또는

yarn add recoil

RecoilRoot

  • 루트 컴포넌트에 RecoilRoot 넣기
import {RecoilRoot} from 'recoil';

function App() {
  return(
    <RecoilRoot>
      App
    </RecoilRoot>
    );
}

Atom

  • 상태(state)의 일부
const textState = atom({
  key: 'textState', // unique ID
  default: '', // default value
});

useRecoilState()

  • atom 읽고 쓰기
const [text, setText] = useRecoilState(textState); //[값, setter 함수]

useRecoilValue(), useSetRecoilState()

const todoList = useRecoilValue(textState); // 값만 가져오기
const setTodoList = useSetRecoilState(textState); // setter 함수 가져오기

Selector

  • 파생된 상태(derived state)의 일부
const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

0개의 댓글