이 장에서는 API를 연동하는 상황에 특화된 라이브러리인 리액트 쿼리(React Query)를 배워보겠습니다. 이 라이브러리는 Hook을 기반으로 데이터를 편하게 로딩할 수 있게 해줍니다.

만약 별도 라이브러리 없이 데이터를 로딩하는 로직을 구현한다면 다음과 같은 형식으로 작성할 수 있습니다.

function MyComponent() {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  const fetchData = useCallback(() => {
    setLoading(true);
    try {
      const posts = await getPosts();
      setData(posts);
    } catch (e) {
      setError(e);
    } finally {
      setLoading(false);
    }
  }
    
  useEffect(() => {
    fetchData();
  } ,[])

  // ...
}