[React] react - query , lazy, suspend

app.js

import logo from './logo.svg';
import './App.css';
import {Button, Navbar, Container, Nav, Col, Row} from 'react-bootstrap'
import img from './img/react-img.png';
import {Suspense, lazy, useState } from 'react';
import data from './data.js';
import Main from './routes/main.js';
//import Detail from './routes/detail.js';
import Event from './routes/event.js';
import About from './routes/about.js';
import {Service,Coupon} from './components/eventCompo.js';
import { Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom';
//import Cart from './routes/cart.js';
import axios from 'axios';
import { useQuery } from 'react-query';

// 첫 화면에서 보이지 않는 컴포넌트들은 필요할 때  import 해줘
// 단점 : 로딩이 늦어짐 -> 지연될 것 같은 페이지에 <Suspense>로 감싸면 로딩중 UI넣기 가능
// Routes 전체를 Suspense 감싸도 됨
const Detail = lazy(()=> import('./routes/detail.js'))
const Cart = lazy(()=> import('./routes/cart.js'))

function App() {

  let [shoes,setShoes] = useState(data)
  let navigate = useNavigate() // 페이지 이동

  // react-query ajax 요청
  // 성공 실패 로딩중 쉽게 파악가능
  let result = useQuery('작명',()=>{
    return axios.get('https://codingapple1.github.io/userdata.json').then((a)=>{
    // 자동 refetch : 다른곳 갔다와도 요청
    console.log ('요청')  
    return a.data
    })
     //staleTime : refech 타임 설정 ( 2초에 한번 씩 요청)
  },{staleTime : 2000})

  // 실패 시 알아서 retry
  //result.data //성공시 데이터
  //result.isLoading //로딩 중 true
  //result.error //실패 시 true
  // 하위 컴포넌트에서 똑같은 곳으로 ajax 요청 해도 한번만 함 -> state 공유 할 필요 없음

  return (
    <div className="App">

       <Navbar bg="dark" variant="dark">
        <Container>
        <Navbar.Brand href="/">Shop</Navbar.Brand>
        <Nav className="me-auto">
          <Nav.Link onClick={()=>{navigate('/')}}>Home</Nav.Link> {/* navigate(1 : -> 앞으로가기 / -1 : <- 뒤로가기) */}
          <Nav.Link onClick={()=>{navigate('/detail')}}>Detail</Nav.Link>
          <Nav.Link onClick={()=>{navigate('/cart')}}>Cart</Nav.Link>
          <Nav className='ms-auto' style={{color:'white'}}>
            { result.isLoading ? '로딩증' : result.data.name}
            {result.error &&'에러'}
            {}
          </Nav>
        </Nav>
        </Container>
      </Navbar>
 
      <Routes>
          <Route path='/' element={<Main shoes={shoes} setShoes={setShoes}/>}/>  
          <Route path='/detail/:id' element={
          <Suspense fallback={<div>로딩중</div>}> 
          <Detail shoes={shoes}/>
          </Suspense>
          }/>  
          <Route path='*' element={<div>없는페이지</div>}/>

          <Route path='/about' element={<About/>}> 
            <Route path='member' element={<div>member</div>}/>  
            <Route path='location' element={<div>location</div>}/>  
          </Route>  

          <Route path='/event' element={<Event/>}> 
            <Route path='one' element={<Service/>}/>  
            <Route path='two' element={<Coupon/>}/>  
          </Route>  
          <Route path='/cart' element={
          <Suspense>
          <Cart/>
          </Suspense>
          }/>
        </Routes>
        
      </div>

  );
}

export default App;

index.js

root.render(
  //<React.StrictMode>
  <QueryClientProvider client={queryClient}>
    <Provider store={store}>
      <BrowserRouter>
      <App />
      </BrowserRouter>
    </Provider>
    </QueryClientProvider>
  //</React.StrictMode>
);