[Recoil] #2 Atom 사용하기

2023. 6. 14. 22:39Front-end/React

반응형

recoil에는 atom 값을 사용하기 위한 여러 hook이 있는데 이 hook들에 대해 정리해 본다

 

먼저, todoState라는 Atom을 생성하였다.

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

useRecoilState

const [todo, setTodo] = useRecoilState(todoState);

atom을 읽고 쓰려고 할 때 사용한다.

react의 useState와 비슷하다. 기본값 대신 recoil의 상태를 인자로 받는다.

 

useRecoilValue

const todo = useRecoilValue(todoState);

atom의 값만 읽어오고 싶을 때 사용한다.

상태가 업데이트되면 리렌더링 된다.

useSetRecoilState

const setTodo = useSetRecoilState(todoState);

atom의 값을 변경만 할 때 사용한다.

atom의 값을 업데이트할 수 있는 setter함수를 리턴한다. 이때 setter 함수는 비동기로 사용될 수 있다.

값을 변경하더라도 리렌더링 되지 않는다.

useResetRecoilState

const resetTodo = useResetRecoilState(todoState);

atom의 값을 초기화하고 싶을 때 사용한다.

 

 

 

selector의 사용법도 알아보아야 한다.....

아직 써본 적이 없어 공부를 해야 할 듯

반응형

'Front-end > React' 카테고리의 다른 글

[React] 프로젝트에 폰트 적용하기 (+MUI)  (1) 2024.01.03
[react-toastify] custom toast 사용하기  (1) 2023.12.27
React-Quill 써보기  (0) 2023.12.20
[Recoil] #1 Recoil?  (0) 2023.06.02