상태 관리 라이브러리 - Recoil (5. 기타 기능)

atomFamily

selectorFamily와 비슷하게 atomFamily도 인자를 받아와서 상황별로 로직을 정해주는 기능을 한다. atomFamily를 호출하면 전달한 매개변수에 따라 recoil state를 제공하는 함수를 반환한다.

atomFamily는 매개변수를 받아 고유한 키를 생성하며, 이 키를 기반으로 상태를 관리한다. 주로 동일한 종류의 상태를 여러 개 생성할 때 유용하며 다음과 같이 작성한다.

export const elementPositionStateFamily = atomFamily({
  key: 'elementPositionStateFamily',
  default: (id) => id
});

const ElementListItem: FC<{ elementID: string }> = ({ elementID }) => {
  const position = useRecoilValue(elementPositionStateFamily(elementID));
  
  return (
    <div>
      Element: {elementID}
      Position: {position}
    </div>
  );
}

useRecoilValueLoadable

비동기 로직을 받아올 때 로딩값, 에러값을 받아올 수 있는 hook이다

 const { contents, state } = useRecoilValueLoadable<User>(currentUserQuery('1'));

    if (state === 'loading') {
        return (<div>
            loading..
        </div>
    }

    if (state === 'hasError') {
        return <div>
        	err..
    	</div>
    }

    return (
        <div>               
            <React.Suspense fallback={<div>Loading...</div>}>
                user : {contents.username}
            </React.Suspense>
        </div>        
    );

cachePolicy_UNSTABLE

selector를 통해 recoil state의 값을 활용할 때, 특정 상황에서는 값을 cashing하지 않고 변화가 일어날 때마다 그 변화의 동작이 동일하더라도 다시 새로운 계산을 시키고 싶은 경우가 있다. 예를 들어 input의 입력의 변화가 일어날 때마다 api를 호출하는 등의 상황이다. 이러할 때는 selector에 다음과 같은 옵션을 준다.

cachePolicy_UNSTABLE: { eviction: 'most-recent' }

이외에도 여러가지 hook을 간략하게 살펴보자.

• useResetRecoilState
  atom의 값을 초기화하는 함수를 반환하는 훅이다. 초기값으로 리셋하고 싶을 때 사용한다.

• useRecoilCallback
  Selector의 비동기 작업을 처리하거나 상태 업데이트 로직을 캡슐화할 때 사용된다. 함수를 반환하며, 해당 함수 내에서 selector나 atom 값을 업데이트할 수 있다.

• waitForNone, waitForAny, waitForAll
  여러 개의 Recoil 값을 기다리는 함수이다. 각각 모든 값이 준비될 때까지 대기하거나, 하나만 준비될 때까지 대기하거나, 아무 값이 준비될 때까지 대기하게 해준다.

이 외에도 다양한 유틸리티 함수와 기능이 있으며, 이러한 기능들은 상태 관리를 보다 효율적으로 다루는데 도움을 준다. recoil 공식 문서에서 더 많은 정보와 사용법을 확인할 수 있다.