캐시가 있는 useAsync 후크

앱이 데이터를 로드하고 있음을 사용자에게 보여주는 것이 좋습니다. 이는 로딩 표시기를 표시하고 데이터가 준비될 때까지 콘텐츠를 숨겨서 수행됩니다. 우리 대부분은 데이터가 준비되었는지 여부를 추적하는 구성 요소의 상태를 유지 관리할 것이며 이는 API를 호출하는 모든 구성 요소에서 반복됩니다.

다음 예를 고려하십시오.


할 일 구성 요소

import React, { useState, useEffect } from "react";
const Todos = () => {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const init = async () => {
      try {
        setLoading(true);
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/todos"
        );
        const data = await response.json();
        setTodos(data);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    init();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error</div>;
  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
};

TODO 세부정보

const Todo = ({ id }) => {
  const [todo, setTodo] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const init = async () => {
      try {
        setLoading(true);
        const response = await fetch(
          `https://jsonplaceholder.typicode.com/todos/${id}`
        );
        const data = await response.json();
        setTodo(data);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    init();
  }, [id]);

  if (loading) return <div>Loading 2...</div>;
  if (error) return <div>Error 2</div>;
  return (
    <div>
      <h1>{todo.title}</h1>
    </div>
  );
};

보시다시피 코드에서 발생하는 세 가지 주요 사항이 있습니다.

첫 번째는 가져오기가 진행되는 동안 로드 표시기를 표시한다는 것입니다.

두 번째는 오류가 있는 경우 처리하는 것입니다.

세 번째는 할 일 상태를 API에서 받은 데이터로 설정한다는 것입니다.

참고: 데이터 가져오기 논리는 두 구성 요소에서 동일합니다. 모든 비동기 데이터 가져오기 및 상태 업데이트를 처리하는 데 사용할 사용자 지정 후크를 만들 수 있습니다.

사용자 지정 후크(useAsync)

React 후크는 기존 구성 요소 수명 주기보다 더 유연한 구성 요소를 만드는 데 사용할 수 있는 함수 집합입니다.

모든 비동기 데이터 가져오기 및 상태 업데이트를 처리하는 데 사용할 사용자 지정 후크를 만들 수 있습니다.


useAsync 후크

import React, { useState, useEffect } from "react";

const useAsync = (defaultData) => {
  const [data, setData] = useState({
    data: defaultData ?? null,
    error: null,
    loading: false,
  });

  const run = async (asyncFn) => {
    try {
      setData({ data: null, error: null, loading: true });
      const response = await asyncFn();
      const result = { data: response, error: null, loading: false };
      setData(result);
      return result;
    } catch (error) {
      const result = { data: null, error, loading: false };
      setData(result);
      return result;
    }
  };

  return {
    ...data,
    run,
  };
};

할 일 구성 요소

import React, { useState, useEffect } from "react";
import { useAsync } from "./hooks";
const Todos = () => {
  const { data, loading, error, run } = useAsync([]);

  useEffect(() => {
    run(() => fetch("https://jsonplaceholder.typicode.com/todos").then((res) => res.json()));
  }, []);

  // Same as above
  return ...
};

TODO 세부정보

import React, { useState, useEffect } from "react";
import { useAsync } from "./hooks";
const Todo = ({ id }) => {
  const { data, loading, error, run } = useAsync(null);

  useEffect(() => {
    run(() => fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then((res) => res.json()));
  }, [id]);

  // Same as above
  return ...
};

노트:

커스텀 후크를 사용하여 작성해야 하는 코드의 양을 줄였습니다. 또한 코드를 읽고 유지하기가 더 쉽습니다.


사용자 지정 후크에 더 많은 기능을 추가해 보겠습니다.

데이터가 이미 상태에 있는 경우 API 호출을 방지하기 위해 사용자 정의 후크에 캐싱을 추가합니다.

import { useState, useCallback } from "react";

const cache = new Map();
const defaultOptions = {
  cacheKey: "",
  refetch: false,
};

export const useAsync = (defaultData?: any) => {
  const [data, setData] = useState({
    data: defaultData ?? null,
    error: null,
    loading: false,
  });

  const run = useCallback(async (asyncFn, options = {}) => {
    try {
      // Merge the default options with the options passed in
      const { cacheKey, refetch } = { ...defaultOptions, ...options };

      const result = { data: null, error: null, loading: false };

      // If we have a cache key and not requesting a new data, then return the cached data
      if (!refetch && cacheKey && cache.has(cacheKey)) {
        const res = cache.get(cacheKey);
        result.data = res;
      } else {
        setData({ ...result, loading: true });
        const res = await asyncFn();
        result.data = res;
        cacheKey && cache.set(cacheKey, res);
      }
      setData(result);
      return result;
    } catch (error) {
      const result = { data: null, error: error, loading: false };
      setData(result);
      return result;
    }
  }, []);

  return {
    ...data,
    run,
  };
};

TODO 세부정보

import React, { useState, useEffect } from "react";
import { useAsync } from "./hooks";
const Todo = ({ id }) => {
  const { data, loading, error, run } = useAsync(null);

  useEffect(() => {
    run(() => fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
        .then((res) => res.json()),
        {cacheKey: `todo-${id}`});
  }, [id]);

  // Same as above
  return ...
};

옵션:

cacheKey: 데이터를 캐시에 저장하는 데 사용할 키입니다.

다시 가져오기: API에서 데이터를 다시 가져오려는 경우입니다. 이는 캐시의 데이터를 새로 고치려는 경우에 유용합니다.

참고: 캐시는 전역적으로 사용할 수 있으므로 다른 구성 요소에서 사용할 수 있습니다. 동일한 cacheKey를 사용하여 여러 구성 요소에서 useAsync를 사용하면 캐시 데이터가 모든 구성 요소에서 공유됩니다. 이는 데이터가 이미 캐시에 있는 경우 불필요한 API 호출을 피하려는 경우에 유용합니다.


React Query와 SWR은 모든 비동기 데이터 가져오기를 처리하는 데 사용할 수 있는 두 가지 인기 있는 라이브러리입니다.

라이브 예, 여기

읽어주셔서 감사합니다 😊

질문이나 추가 사항이 있습니까? 댓글을 남겨주세요.




당신이하지 않은 경우 읽어야합니다













자세한 내용은 .


Github , , , Medium , Stackblitz에서 나를 잡아라.