React - 쇼핑몰 웹사이트 (6) - React Query

1. 실시간 데이터 React Query

 

index.js 세팅 해줘야함 

import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query' 
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>
);

{ return 값 } = 값 

같은 말 

 

function App(){
  let result = useQuery('작명', ()=>
    axios.get('https://codingapple1.github.io/userdata.json')
    .then((a)=>{ return a.data })
  )
}

 

1. ajax 요청 성공 / 실패 / 로딩중 상태가 결과 값 안에 그대로 들어가있어서 여러가지 상태를 관리하기가 편함

2. 틈만나면 알아서 ajax요청을 해줌 

3. 실패시 재시도를 알아서 해줌 

4. ajax 로 가져온 결과는 state공유 필요 없음