TIL : Recoil

확실히 처음 써봤을 때 보단 이해가 잘 된다. 처음보다 생각하고 적용하는 것 같다🐤

 

🌼 state management는 전역상태를 만드는 도구

props를 쓰면 안 쓰는 컴포넌트도 전달을 해주기 위해 쓰이면서 불필요한 렌더링이 발생한다.

 

state manegement를 구독하면, 컴포넌트가 상태를 변동하면 구독 중인 컴포넌트들이 통보를 받고 각자 렌더링이 시작된다. 즉 전역적인 상태를 가지는 것.

 

코드 줄이고 성능 높일 수 있다. 

이중에서 Recoil에 대해 알아보자!

---

🌼 RecoilRoot

상태관리 하고자 하는 컴포넌트의 부모에 <RecoilRoot>

<React.StrictMode>
<RecoilRoot>
  <App />
</RecoilRoot>
</React.StrictMode>

 

이렇게 하면 전역상태가 app 컴포넌트 밑에서 유효하다

 

🌼 전역상태를 atom이라 하고

import { atom } from 'recoil';

export const nickNameState = atom({
  key: 'nickName',
  default: '',
});

export const tagState = atom<number[]>({
  key: 'selectedTags',
  default: [],
});

 

key는 이름

default는 기본 값!

import { useRecoilState } from 'recoil';

const [nickName, setNickName] = useRecoilState<string>(nickNameState);
const [selectedTags, setSelectedTags] = useRecoilState<number[]>(tagState);

 

useRecoilstate를 사용한다는 것은 전역 상태를  구독하고 있다는 뜻

구독하고 있는 것들만 렌더링 된다.

 

아톰은 전역 공간에 있기 때문에 키값은 중복이 안 된다고 한다!

 

  const [nickName] = useRecoilValue<string>(nickNameState);
  const [selectedTags] = useRecoilValue<number[]>(tagState);

 

버튼을 클릭했을 때 값만 보내줄 것이라서 

useRecoilValue를 써서 아톰 안에 있는 값에 접근하기 위한 함수를 썼다.

useRecoilState() 이 함수는 값을 설정할 수 있다. 즉 읽고 쓰게 하는 함수

 

---

🧚‍♀️ 추가 공부 필요

- Selector 공부하고 코드에 적용해보기