JSX 구성 요소로 사용할 수 없습니다. 오류 발생

🥹 문제 발생

기존 코드를 tanstack query로 변경하여 로딩상태를 추가해 주었더니 해당 컴포넌트를 import 하는 부분에서 JSX 구성 요소로 사용할 수 없습니다.라는 오류가 발생하였다 ..

 

🤔 문제 원인

조건에 맞는 경우에만 하나의 UI를 반환하려는 의도였지만, 컴포넌트 전체에서 두 번 이상의 return을 실행하려고 해서 "JSX 구성 요소로 사용할 수 없습니다" 오류가 발생했다.

React는 단일 JSX 반환을 기대하기 때문에, 여러 번 return을 사용하는 것이 문제의 원인이었다.

  if (isLoading) return <Loading className="h-[280px] w-[280px] mx-auto xl:h-[400px] xl:w-[400px] xl:m-0 xl:my-auto" />;
  if (error) return console.error("Error fetching data:", error);

 

👍🏻 해결 방법

조건문을 수정해 주었다.

 if (isLoading) {
    return <Loading className="h-[280px] w-[280px] mx-auto xl:h-[400px] xl:w-[400px] xl:m-0 xl:my-auto" />;
  }

  if (error) {
    console.error("Error fetching data:", error);
  }