Eojin Han


---
title: class Loadable
sidebar_label: Loadable
---

`Lodable` 객체는 Recoil의 [atom](/docs/api-reference/core/atom) 혹은 [selector](/docs/api-reference/core/selector)의 현재 상태를 나타낸다. 이 상태는 비동기 처리 측면에서 유효한 값을 얻었거나, 에러 상태이거나, 혹은 여전히 펜딩(pending) 상태일 수 있다. `Lodable` 은 다음의 인터페이스를 가진다:

- `state`: atom 혹은 selector의 현재 상태를 뜻하며, 가능한 값은 '`hasValue`', '`hasError`', 혹은 '`loading`' 이다.
- `contents`: `Lodable`에 의해 표시되는 값이다. 만약 state가 `hasValue` 라면 이는 실제 비동기 처리 결과 값이고, 만약 상태가 `hasError` 라면 이는 던져진 `Error` 객체이며, 상태가 `loading`이라면 `toPromise()`를 사용하여 값의 `Promise`를 얻을 수 있다.

Lodable은 현재 상태에 접근하기 위한 도우미 메서드를 가지고 있다. *이 API는 아직 불안정하다*:

- `getValue()` - React Suspense와 Recoil selectors의 의미에 일치하는 값에 접근하기 위한 메서드다. 만약 상태가 값을 가지고 있다면 값을 리턴하고, error를 가지고 있다면 해당 error를 던지며, 여전히 펜딩(pending) 상태라면 펜딩 상태를 전파하기 위해 실행 또는 렌더링을 일시 중지한다.
(#이상함) - `toPromise()`: selector가 resolved 상태라면 resolve할 `Promise` 를 반환한다. selector가 동기식(synchronous)이거나 이미 resolved 상태라면 즉시 resolve하는 `Promise`를 반환한다.
- `valueMaybe()` - 값을 반환할 수 있다면 값을 반환하고, 아니라면 `undefined` 를 반환한다.
- `valueOrThrow()` - 값을 반환할 수 있다면 값을 반환하고, 아니라면 Error를 던진다.
- `map()` - Lodable의 값을 변형시키기 위한 함수를 전달받고, 변형된 값을 가진 새로운 Lodable을 반환한다. 변형 함수는 값의 매개변수를 받아 새로운 값을 반환한다; 던져진 에러나 suspense를 전파할 수도 있다.

### 예시

```jsx
function UserInfo({userID}) {
  const userNameLoadable = useRecoilValueLoadable(userNameQuery(userID));
  switch (userNameLoadable.state) {
    case 'hasValue':
      return <div>{userNameLoadable.contents}</div>;
    case 'loading':
      return <div>Loading...</div>;
    case 'hasError':
      throw userNameLoadable.contents;
  }
}
```
Loadable 번역
