[React] 20. react-query로 '반갑습니다 00님' 띄우기

지렁·2023년 11월 20일

다음과 같이 "반갑습니다 00님" 을 띄워보도록 하겠다

우선 UI를 만들어주었다

<Nav className='ms-auto'>반가워요 lee</Nav>

그리고 아래의 주소로 데이터를 요청해서 이름 데이터바인딩을 해보겠다

https://codingapple1.github.io/userdata.json

✔ 그냥 ajax 요청하기

axios 외부라이브러리를 사용하여 get 요청을 하였다

  axios.get('https://codingapple1.github.io/userdata.json')
  .then((res)=>console.log(res.data))

이번엔 더 편리한 react-query로 ajax를 요청해볼 것이다

✔ react-query로 ajax 요청하기

react-query란?

몇초마다 자동으로 데이터 다시 가져오게 하려면?

요청실패시 몇초 간격으로 재시도?

다음 페이지 미리가져오기?

ajax 성공/실패시 각각 다른 html을 보여주려면?
SNS, 코인거래소같은 실시간 데이터를 보여줘야하는 사이트들에 적합

◾ 세팅

우선 설치하고

npm install react-query

index.js에서 아래와 같이 작성한다

import { QueryClient, QueryClientProvider } from "react-query"  //1번
const queryClient = new QueryClient()   //2번

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>  //3번
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </QueryClientProvider>
);

◾ 사용

App.js

  const result = useQuery({
    queryKey: ["user"],
    queryFn: async () => {
      // 비동기 작업 수행
      const response = await axios.get("https://codingapple1.github.io/userdata.json");
      return response.data;
    },
  });

  if (result.isLoading) {
    return <p>Loading...</p>;
  }

react-query 문법이 바뀌어서 정말 많은 에러를 만났다..!

구조분해문법을 사용하여

const {data,isLoading,error} =useQuery({~

이렇게 사용을 했었는데 자꾸 Detail 페이지 접속과 동시에 title이 존재하지 않는다는 에러가 발생하였다

아마 이전에 상품데이터를 담는 data 변수를 사용하고 있었어서 에러가 나는 것이라고 판단하고 result라는 변수를 만들어서 사용하였다

result.data

result.isLoading

result.error

그리고 로딩 처리까지 해주어야 깔끔히 에러가 사라진다

if (result.isLoading) {
    return <p>Loading...</p>;
  }

드디어 에러 해결 완료...

🖤 react-query 장점

1) ajax 요청 성공/실패/로딩중 상태를 쉽게 파악 가능

내가 만든 result라는 변수에 ajax 현재 상태가 알아서 저장된다

ajax요청이 로딩중일 땐 result.isLoading 이 true
ajax요청이 실패시엔 result.error 가 true
ajax요청이 성공시엔 result.data 안에 데이터가 들어옴

<Nav className='ms-auto'>
  { result.isLoading && '로딩중' }
  { result.error && 'error' }
  { result.data && <div style={{fontSize:"12px"}}>반갑습니다 <b>{result.data.name}</b> 님</div> }
</Nav>