recoil 리코일

1. react 의 전역관리

props,state / 단방향 데이터 바인딩으로 인한 props drilling 의 문제 → 전역 상태 관리 필요함

prop drilling : props로 데이터 쭉 전달하는 것 , 데이터를 전달하는 과정에서 중간 컴포넌트는 그 데이터가 불필요함에도 자식 컴포넌트에 오직 “전달”하기 위해 props를 전달해야 하는 과정을 말함 → 프로젝트 규모가 커지면서 관리와 추적이 어렵게 되어, 전역으로 관리한다.

• redux : 가장 많이 사용하는 react 상태관리 라이브러리 , 디버깅이 쉽다
• recoil: react 전용 상태관리 라이브러리, 내부적으로 캐싱이 되어 동일한 atom 값에 대해 메모이즈된 값을 반환하여 속도가 빠름

2. recoil

recoil의 사용방법은 useState와 거의 동일하다. useState는 local, recoil은 global로 생각하면 될듯

atom: recoil에서 상태를 정의하는 방법

export const isLoggedIn = atom<IsLoggedInType | null>({
  key: 'user_state',
  default: null,
});

1. useRecoilState(isLoggedIn) = useState()와 같이 배열의 첫 번째 원소가 상태, 두 번째 원소가 상태를 업데이트하는 함수를 반환
2. useRecoilValue(isLoggedIn) 는 상태 값만 필요한 경우에 사용
3. useSetRecoilState(isLoggedIn) 상태를 업데이트하는 함수만 필요한 경우 사용

const [user, setUser] = UseRecoilState(isLoggedIn) 
const user = UseRecoilValue(isLoggedIn) 
const setUser = UseSetRecoilState(isLoggedIn)