React에서 데이터를 가져오는 마법 같은 방법

React를 사용해 본 적이 있다면 API를 쿼리해야 할 가능성이 있습니다. 웹 사이트에서 데이터 가져오기의 중요성은 필수불가결합니다. 진정으로 즐거운 경험을 구축하려면 데이터를 올바르게 가져와야 합니다. 매우 중요합니다.

React 애플리케이션에서 쿼리하기 위한 기존 접근 방식을 빠르게 안내해 드리겠습니다. 이 중 대부분은 사소해 보일 수 있지만 실제 차이점react-query을 확인하기 위해 살펴보는 것이 중요합니다. (마법이야, 날 믿어😉)

JSON Placeholder API을 데이터 소스로 사용합니다. 우리는 주로 모든 게시물 목록과 개별 게시물의 두 가지 유형의 쿼리를 만들 것입니다. 모든 게시물 목록을 가져오는 후크를 작성해 보겠습니다.

const baseUrl = 'https://jsonplaceholder.typicode.com';

const usePosts = () => {
  const [data, setData] = useState();

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch(`${baseUrl}/posts`);
      const posts = await res.json();
      setData(posts);
    };
    fetchData();
  }, []);

  return { data };
};

이것은 익숙해 보일 것입니다. 오류나 로드 상태를 처리하지 않았음을 알 수 있습니다. 그것은 나쁜 습관입니다. 지금 해보자.

const usePosts = () => {
  const [data, setData] = useState();
  const [isLoading, setLoading] = useState(true);
  const [error, setError] = useState();

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);

      try {
        const res = await fetch(`${baseUrl}/posts`);
        const posts = await res.json();
        setData(posts);
        setLoading(false);
      } catch (error) {
        console.log(error);
        setError(error);
        setData([]);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return { data, isLoading, error };
};

와... 확실히 기분이 좋지는 않았습니다. 😒 후크가 두 가지 간단한 상태를 지원하도록 만들기 위해 엄청난 양의 코드를 추가해야 했습니다. 그리고 이 쿼리는 기본적으로 구성 요소가 다시 렌더링될 때마다 실행됩니다. 이것은 이상적이지 않습니다. 당신은 더 나은 자격이 있습니다.

백그라운드 업데이트는 어떻습니까? 부실 데이터? 쪽수 매기기? 프로그래밍 방식으로 쿼리를 다시 실행하시겠습니까?

행운을 빕니다. 🤷‍♂️

여기에서 react-query가 구출됩니다. 따라하고 싶다면 this repo을 상용구로 사용하세요.

이제 react-query를 사용하여 usePosts 후크를 리팩터링해 보겠습니다. 이전에 react-query를 사용해 본 적이 없다면 놀랄 것입니다.

// hooks/hooks.js
const usePosts = () => {
  const fetchData = async () => {
    return fetch(`${baseUrl}/posts`).then((r) => r.json());
  };

  return useQuery('posts', fetchData);
};

응. 그게 다야. 나는 당신에게 말했다. 😎
usePost 후크에 대해서도 동일하게 수행할 수 있습니다.

const usePost = (id) => {
  const fetchData = async () => {
    return fetch(`${baseUrl}/posts/${id}`).then((r) => r.json());
  };

  return useQuery(['post', id], fetchData);
};

이 코드 조각은 우리가 전통적인 접근 방식으로 처리한 모든 것을 처리하는 데 필요한 모든 것입니다. 더 깊이 잠수합시다.

아래 스크린샷에 표시된 아이콘을 클릭하여 react-query devtools를 엽니다. 열어 두십시오.

지금 웹 앱을 클릭하고 devtools를 주시하십시오. 쿼리가 실행될 때 기록되는 쿼리를 확인할 수 있습니다. 꽤 직관적입니다.

나는 react-query가 로딩, 오류 등과 같은 상태를 관리하는 것보다 훨씬 더 많은 일을 할 수 있다고 언급했습니다. 그 중 하나인 쿼리 무효화를 살펴보겠습니다. 간단히 말해서 쿼리 무효화는 각각의 쿼리가 '부실'한 것으로 간주하고 쿼리를 다시 실행하도록 react-query에 지시하는 것입니다. 시도해 봅시다.

게시물 목록 상단에 다시 가져오기 버튼을 추가할 예정입니다. 말할 필요도 없이 이 버튼을 클릭하면 앱이 게시물 목록을 다시 가져옵니다. 우리는 이를 위해 react-query를 사용하고 있기 때문에 이것은 우리에게 식은 죽 먹기가 될 것입니다. 😁

// pages/index.js
import { useQueryClient } from 'react-query';

export default function Home() {
  const queryClient = useQueryClient();

  const reFetchPosts = () => {
    queryClient.invalidateQueries('posts');
  };

  return (
    <Container>
      <Button onClick={reFetchPosts}>Re-fetch</Button>
      {data.map((post) => {
        //...
      })}
    </Container>
  );
}

그것이 우리가 추가해야 할 전부입니다. 이제 새로 추가된 다시 가져오기 버튼을 클릭하고 react-query devtools를 주시하십시오. 예상대로 쿼리를 다시 실행하는 것을 알 수 있습니다. 브라우저의 devtools에서 네트워크 탭을 사용하여 이를 확인할 수도 있습니다.

결론적으로 우리는 27줄의 코드를 취하여 단 7줄로 좁혀 작업할 더 많은 기능을 갖게 되었습니다. 그것은 나에게 좋은 거래처럼 들린다. 🤝



충격적이다. 나는 그것이 마법이라고 약속했다. 😊

이 기사가 마음에 들면 여기에서 저를 팔로우하고 . 나는 주로 소프트웨어에 대한 폭언을 트윗하고 내 작은 승리에 대해 자랑합니다. ⚡

아래에 댓글을 달아 토론을 시작하거나 질문을 하십시오. 기꺼이 대답하겠습니다. 🤗

참조:

Official react-query docs



표지 사진: Simon Berger