33일차 (트러블 슈팅: React-Query 사용 시 데이터 로딩 문제)

 검색 기능을 구현하는 상황에서 제목과 같은 문제가 발생하였다.

 

 처음에는 API의 URI는 /api/company?name=<기업명>와 같았고,  아래와 같은 useQuery를 통해 companyName을 보내고 get 메서드를 사용해 데이터를 받아오는 방법을 사용하였다.

// 상태관리
const [searchCompanies, setSearchCompanies] = useState([])

const {data} = useQuery("search", () => searchCompany(companyName),

=> 이후 setSearchCompanies(companyName)를 하여 searchCompanies 구성

 검색 버튼을 누르자마자 데이터가 들어오기를 기대하고 사용했지만, 이전에 companyName의 데이터들만 들어왔다. 실패였다..

 

 

 두 번째 해결 방안

const { data } = useQuery("search", () => searchCompany(companyName),
{ enabled: false });

enabled를 false로 두어 true로 바뀌기 전까지 useQuery를 실행하지 않는 방법을 시도했다. 렌더링이 될 때 기존에 저장되어 있던 데이터가 들어오지 않아서 성공할 것 같아 보였지만, 첫 번째 검색 이후 두 번째 검색을 시도했을 때 첫 번째 검색을 통해 얻은 데이터가 들어오는 문제가 발생했다. 실패였다..

 

 

세 번째 해결방안: useQuery 포기

const goCompanyDetail = async (companyNames) => {
    try {
      const response = await axios.get(
        `http://3.36.132.42:8080/api/company?name=${companyNames}`
      );
      if (response.data.content) {
        navigate("search", { state: response.data.content });
      }
    } catch (error) {
      console.log("검색결과가 없습니다", error);
    }
  };

결국 useQuery를 포기하고 axios만을 사용해서 진행하였다. 결과는 스무스하게 성공이었다. 미니 프로젝트를 사용하면서 react-Query가 서버의 상태를 불러오는 최고의 라이브러리라고 생각했는데, 살짝 의문이 들었다. 앞으로 react-Query에 대해 더 공부해 보면서 장, 단점을 명확히 파악하고 사용해야겠다.