[recoil] 그럼 Recoil은 언제 써야해요 ?

Recoil이란? 

React 애플리케이션을 위한 상태 관리 라이브러리 

Recoil같은 상태 관리 라이브러리를 사용해야 하는 경우

1️⃣ 여러 컴포넌트에서 동일한 상태를 공유할 때 

ex) 로그인 상태 , 사용자 정보 , 테마 설정 등

❌ useState 사용 : 여러 컴포넌트에서 상태 공유 어려움 
                             : *prop drilling 이 발생할 수 있음 
*prop drilling 
 : React에서 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 때 중간 컴포넌트들이 불필요하게 prop을 전달해야 하는 문제

2️⃣ 컴포넌트 간 상태를 동기화해야 할 때 

ex) 필터 옵션 , 검색어, 사이드바 상태

✅ 페이지 내 여러 섹션에서 동일한 데이터를 참조해야 한다면 Recoil을 활용

3️⃣ 페이지 간 이동 시 상태를 유지해야 할 때

ex) 페이지 이동 시 유지되어야 하는 데이터 (장바구니 , 선택한 옵션 등)

❌ useState 사용 : 상태가 사라짐 

❌ localStorage나 sessionStorage 사용 : 비효율적

✅ Recoil 사용 : 전역 상태로 관리 가능

4️⃣ API 요청 결과를 캐싱해야  할 때 

: recoil의 selector 활용

ex) 사용자 정보  , 상품 리스트 , 차트 데이터 등

✅ recoil의 selector을 활용하면 API 요청을 상태로 저장하여 불필요한 재요청 줄일 수 있음

const userInfoQuery = selector({
  key: 'userInfoQuery',
  get: async () => {
    const response = await fetch('/api/user');
    return response.json();
  },
});

function UserProfile() {
  const userInfo = useRecoilValue(userInfoQuery);
  return <div>{userInfo.name}</div>;
}

 

Recoil같은 상태 관리 라이브러리를 굳이 사용하지 않아도 되는 경우 🙅

1) 단순한 로컬 상태 관리
 : useState나 useReducer 사용
2) 부모-자식 간 데이터만 전달
 : props 사용
3) React Query 같은 라이브러리를 사용하는 경우
 : API 캐싱의 경우 이것이 더 정확함