Recoil의 비동기 값은 로딩·성공·실패를 어떻게 표현하나요?

이렇게 답해 보세요 (핵심 답변)

Recoil의 비동기 selector는 Promise를 반환해 원격 데이터나 비동기 파생 상태를 상태 그래프 안에 자연스럽게 표현합니다. 이를 화면에서 읽을 때는 두 가지 방식이 있는데, 컴포넌트를 React Suspense와 Error Boundary로 감싸 로딩·에러 UI를 선언적으로 위임하거나, useRecoilValueLoadable로 읽어 state('loading' | 'hasValue' | 'hasError')에 따라 직접 분기 렌더링할 수 있습니다. 또한 selector가 참조하는 상위 atom 값이 바뀌면 새로운 조건으로 비동기 함수가 다시 평가되므로, 경쟁 상태와 에러 복구(재시도) 흐름을 함께 설계해야 합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 로딩 중(loading), 정상적인 빈 결과(hasValue + []), 요청 실패(hasError)는 사용자에게 전혀 다른 안내를 보여 주어야 하는 별개의 상태입니다.
2. 비동기 상태 경계를 컴포넌트 단위로 명확히 나누어 두면 특정 API 실패가 전체 페이지 크래시로 번지는 것을 막을 수 있습니다.

면접에서 자주 하는 실수

비동기 selector에서 에러가 났을 때 catch해서 무조건 빈 배열로 덮어 버리면 사용자는 데이터가 원래 없는 것인지 네트워크 장애인지 구분할 수 없게 됩니다.