[Solid] Syntax | 13. Resource

Resource는 Solid에서 비동기 처리를 할 때 사용합니다.

 

createResource( ) 함수를 이용해 사용할 수 있습니다.

// createResource를 사용하기 위해 먼저 불러와야 합니다.
import { createResource } from "solid-js";

// 비동기 함수인 asyncFunction을 실행한뒤 그 결과값을 반환합니다.
const [resource] = createResource(asyncFunction);

// flagSignal의 값이 변경되면, asyncFunction을 실행한뒤 그 결과값을 반환합니다.
const [resource] = createResource(flagSignal, asyncFunction);

 

createResouce는 두 번째 값을 추가로 반환할 수 있습니다.

 

두 번째 값은 내부 signal을 직접 업데이트하는 mutate 함수와, 소스가 변경되지 않았을 경우에도 쿼리를 다시 실행하는 refetch 함수를 한 번에 반환합니다.

const [resource, { mutate, refetch }] = createResource(flagSignal, asyncFunction);

아래는 예시 코드입니다.

 

createResource( )를 사용해 비동기 함수인 fetch함수를 실행하여 반환값이 json 객체를 user에 저장합니다.

import { createSignal, createResource } from "solid-js";
import { render } from "solid-js/web";

const fetchUser = async (id) =>
  (await fetch(`https://swapi.dev/api/people/${id}/`)).json();

const App = () => {
  const [userId, setUserId] = createSignal();
  const [user] = createResource(userId, fetchUser);

  return (
    <>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <span>{user.loading && "Loading..."}</span>
      <div>
        <pre>{JSON.stringify(user(), null, 2)}</pre>
      </div>
    </>
  );
};

render(App, document.getElementById("app"));