react에서 useQuery를 통해 서버에서 데이터 받아오기

김재욱·2023년 6월 3일
1

react

목록 보기
4/5

react에서 서버로부터 데이터를 받아오기

프런트앤드 코딩을 처음 진행하면서 알게 된 하나의 사실은 내가 글자 혹은 데이터를 작성해서 화면에 띄우는 것은 굉장히 쉽지만 서버에서 관리하는 데이터를 받아오는 것은 귀찮다는 사실이었다. 하지만 우리는 슬프게도 많은 데이터는 서버에서 관리해야 하고 이 데이터를 화면에 띄우거나 활용해야 할 때면 이를 서버에서 받아와야 한다.

server에서 데이터를 받아오는 방법은 많을 것이지만 내가 유일하게 알고 있고, 우리가 활용한 방법은 useQuery를 활용하는 것이였다.

우리가 만든 서버에서 api를 호출해 오는 코드를 전부 소개하는 것도 좋지만 오늘은 useQuery를 사용하는 코드를 집중적으로 봐보도록 하자.

useQuery의 사용법!

api를 호출하여 얻은 데이터를 활용하는 곳에서 사용하는 코드이다.

export const RANKING_QUERY_KEY = 'ranking';

export const useGetRankingQuery = () => {
    const { data, status } = useQuery({
        queryKey:[RANKING_QUERY_KEY],
        queryFn: async () => {
            const api = new RankingControllerApi();
            return await api.getRanking();
        },
        enabled:true,
    });
    return {data, status};
};

useQuery의 함수 인자는 많이 있으니 구현하고 싶은 기능에 따라 사용하면 된다.

아래는 useQuery에 대한 설명이다.
https://tanstack.com/query/v4/docs/react/reference/useQuery

나는 간단하게 queryKey, queryFn 값만 이용해서 코드를 작성했고 enable은 나중에 사용할 일이 있을 수 있어서 적어둔 것이지 enabled: true라서 아무런 영향을 주지 못한다.

queryKey값에는 이 query에서 사용할 값을 넣어주면 된다. 이 코드에서는 'ranking'이 될 것이다. ranking을 직접 적기보다는 변수를 통해서 입력해 준 이유는 지금은 저곳에서만 쓰이지만 나중에 다양한 곳에서 같은 key가 사용되게 되고 이 값을 바꿔야 하는 일이 생긴다면 변수로 관리하는 편이 유지보수에 유리하기 때문에 변수를 통해 관리하는 것을 추천한다.

queryKey값에는 저런 식으로 값만 집어넣기도 하지만 배열을 통해서 여러 가지 값을 집어넣기도 하니 참고하면 좋을 것 같다.

queryFn 값에는 query가 서버에 데이터를 요청하는 데 사용될 함수이다. Promise 타입의 값을 반환하니 이 점을 고려하여 async와 await를 사용하여 함수를 작성하자.

Required 값은 queryKey와 queryFn이 전부이므로 여기까지 함수를 작성하면 서버로부터 원하는 값인 data를 받아 올 수 있고 status는 서버로부터 받아온 값의 상태를 나타낸다. 값을 받았으면 "success", 값을 받는 중이면 "loading", 값을 받는데 실패하였으면 "error" 일 것이다.

const message = useGetRankingQuery();

  const RankingResultRended = () => {
    return message.status === 'loading' ? (
      <S.RankingMessageWrapper flex={'rowCenter'}>
        <h4>loading ranking</h4>
      </S.RankingMessageWrapper>
    ) : message.status === 'error' ? (
      <S.RankingMessageWrapper flex={'rowCenter'}>
        <h4>getting ranking has an error</h4>
      </S.RankingMessageWrapper>
    ) : (
      <S.RankingMessageWrapper flex={'rowCenter'}>
        <h4>{message.data?.message}</h4>
      </S.RankingMessageWrapper>
    );
  };

이후에 이런 식으로 코드를 작성하여 status에 따라 코드를 작성해 주면 랜더링 되지 않았을 때도 오류 없이 화면을 띄울 수 있다!

profile
초보 개발자의 우당탕탕 코딩일기

0개의 댓글