모든 웹 애플리케이션에서는 로딩 및 오류 상태를 관리하는 것이 중요합니다. 로딩 상태를 표시하면 사용자에게 정보가 계속 제공되지만 역사적으로 이 관리는 수동으로 구현하기가 지루할 수 있습니다.

React Query는 로딩 상태와 전역 상태 처리를 크게 단순화합니다. 실제로 React Query는 중복 요청을 방지하여 애플리케이션 성능을 최적화합니다.

애플리케이션에서 로드 상태를 구현하는 코드 예제를 살펴보겠습니다.

사용자 목록을 가져오는 후크를 정의합니다.

export const useUsers = () => {
  const { data, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      await new Promise((resolve) => setTimeout(resolve, 2000));
      return response.json();
    },
  });

  return {
    users: data?.slice(0, 4) || [],
    isLoading,
  };
};

여기에서는 useQuery를 사용하여 4명의 사용자를 가져옵니다. 로딩 상태를 설명하기 위해 2초 지연을 추가합니다. 그런 다음 로드 상태에 대한 데이터와 부울을 반환합니다.

컴포넌트 측에서 예제라는 이름의 컴포넌트를 생성해 보겠습니다.

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  if (isLoading) {
    return 
Loading...
;
  }

  return (
    

      

        
Users
        

          Add users
        
      
      
  );
};

이 구성요소에서는 후크를 사용하여 사용자 목록을 가져옵니다. 뷰를 렌더링하기 전에 로딩 메시지와 함께 "조기 반환"을 수행한 다음 제목, 버튼 및 사용자를 표시합니다.

제한 사항 및 대안

그러나 각 네트워크 호출에는 로딩 상태에 대한 명시적인 관리가 필요합니다. 코드가 인수분해되지 않으면 제목 및 작업과 같은 뷰의 일부 요소가 표시되기를 기다리고 있을 수 있습니다.

다음은 시야를 차단하지 않는 대안입니다.

import "./App.css";
import UsersList from "./UsersList";
import { useUsers } from "./useUsers";

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    

      

        
Users
        

          Add users
        
      
      {isLoading ? 
Loading...
 : }
    
  );
};

여기에서는 "조기 반환" 대신 조건부 렌더링을 사용합니다. 이 솔루션은 읽기가 어렵고 복잡한 구성 요소에서 유지 관리가 더 어렵습니다.

이상적인 솔루션: 일반 로딩 구성요소

가장 독창적인 솔루션은 로딩 메시지 또는 변수를 기반으로 하는 주요 구성 요소를 렌더링하는 구성 요소를 만드는 것입니다.

type Props = PropsWithChildren;

const LoadingWrapper = ({ children, isLoading }: Props): JSX.Element => {
  if (isLoading) {
    return 
Loading...
;
  }

  return {children}>;
};

구성요소에서의 사용

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    

      ...
      
  );
};

이 인수분해는 조건부 렌더링 논리를 중앙 집중화하고 메시지 로드 사용을 통합하여 더 깨끗하고 유지 관리하기 쉬운 코드를 제공합니다.

서스펜스의 마법을 발견해보세요

하지만 지금 말씀드리자면 우리가 방금 만든 이 컴포넌트는 이미 React에 내장되어 있습니다. 더 좋은 점은 마술적이라는 것입니다! 더 이상 isLoading 상태를 수동으로 관리할 필요가 없습니다!

어떻게?

React의 Suspense(React 버전 >= 16.6)를 사용하면 모든 것이 더 단순해지고 깔끔해집니다. Suspense를 사용하면 구성 요소가 비동기 데이터를 기다리고 있음을 React에 명시적으로 선언할 수 있으며 React는 우리를 위해 모든 것을 관리합니다.

useSuspenseQuery 구현

useSuspenseQuery를 사용하여 로딩 상태를 자동으로 관리해 보겠습니다. 방법은 다음과 같습니다.

사용자를 가져오기 위한 후크

export const useUsersSuspense = () => {
  const { data } = useSuspenseQuery(
    ...
  );

  return {
    users: data?.slice(0, 4) || [],
    // Without the isLoading
  };
};

Suspense가 포함된 구성 요소에서의 사용

이제 Suspense를 사용하도록 예제 구성요소를 업데이트하겠습니다.

const UsersComponent = (): JSX.Element => {
  const { users } = useUsersSuspense();

  return ;
};

const Example = (): JSX.Element => {
  return (
    

      

        
Users
        

          Add users
        
      
      Loading...
}>
        
  );
};

서스펜스의 장점

Suspense를 사용하면 로딩 상태 관리를 한곳에 중앙 집중화하여 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다. Suspense 폴백은 데이터를 사용할 수 없는 한 자동으로 표시되므로 isLoading 상태를 수동으로 관리할 필요가 없습니다.

또한 Suspense는 개발 팀이 코드를 분해하도록 권장합니다. 표준화된 로딩 구성 요소와 비동기 상태 처리기를 사용하면 개발자는 재사용 가능하고 일관된 모듈을 만들 수 있으므로 장기적으로 코드 품질과 유지 관리성이 향상됩니다.

결론

Suspense 및 useSuspenseQuery를 사용하면 React 애플리케이션의 로딩 상태 관리에 혁명이 일어납니다. 이 접근 방식은 코드를 단순화할 뿐만 아니라 부드럽고 일관된 렌더링을 보장하여 사용자 경험을 향상시킵니다. useQuery에서 useSuspenseQuery로의 전환은 더 깨끗하고 효율적인 애플리케이션을 위한 자연스러운 진화입니다.

또한 Suspense를 통합하면 개발 팀이 코드를 분해할 수 있습니다. 결론적으로, Suspense를 채택하고 SuspenseQuery를 사용하는 것은 기술적 개선일 뿐만 아니라 보다 건강하고 효과적인 개발 방식을 향한 한 단계입니다.

내 뉴스레터 :D