react-query 질문.

import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, Container, Nav, Navbar, Row, Col } from 'react-bootstrap';
import { useState, createContext,useEffect } from 'react';
import data from './data.js';
import Detail from './routes/Detail.js';
import Cart from './routes/Cart.js';
import Balenciaga from './routes/Balenciaga.js';
import { Routes, Route, Link, useNavigate, Outlet, json } from 'react-router-dom';
import axios from 'axios';
import { useQuery } from 'react-query';

let Context1 = createContext();

function App() {

  let [shoes,setShoes] = useState(data);
  let [buttonClick,setButton] = useState(1);
  let navigate = useNavigate();
  
  let result = useQuery('작명',()=>{
    axios.get("https://codingapple1.github.io/userdata.json").then((a)=>{
      console.log(a.data.name)
      return a.data
    })
  })
 

  return (
    <div className="App">

      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Dongmay</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={() => navigate("/")}>Home</Nav.Link>
            <Nav.Link onClick={() => navigate("/detail")}>Detail</Nav.Link>
            <Nav.Link onClick={() => navigate("/cart")}>Cart</Nav.Link>
          </Nav>
          <Nav>asdf
          {result.data && result.data.name && <p>Name: {result.data.name}</p>}
          
          </Nav>
        </Container>
      </Navbar>

      <Routes>

        <Route path='/' element={
          <div>
            <div className='main-bg' ></div>
            <Container>
              <Row>
                {
                  shoes.map(function (a, i) {
                    return (
                      <Col md={4}>
                        < img src={`https://codingapple1.github.io/shop/shoes${i+1}.jpg`} alt="shoes" width="80%"
                        onClick={()=>{
                          navigate(`/detail/${i}`)
                        }}
                        />
                        <h4>{shoes[i].title}</h4>
                        <p>{shoes[i].price}</p>
                      </Col>

                    )
                  })
                }

              </Row>

              <Button onClick={() => {
                setButton(buttonClick+1);
                if(buttonClick == 1){
                  axios.get('https://codingapple1.github.io/shop/data2.json')
                  .then((결과) => {       //ajax 요청성공
                    const copy = [...shoes, ...결과.data]
                    setShoes(copy)
                  })
                  .catch(() => {           // ajax 요청실패
                  })
                }else if(buttonClick == 2){
                  axios.get('https://codingapple1.github.io/shop/data3.json')
                  .then((결과) => {       //ajax 요청성공
                    const copy = [...shoes, ...결과.data]
                    setShoes(copy)
                  })
                  .catch(() => {           // ajax 요청실패
                  })
                }else{
                  alert("더이상 상품이 없습니다.")
                }
               

              }}>더보기</Button>

            </Container>
          </div>
        } />

        <Route path='/detail/:id' element={      
          <Detail shoes={shoes} />
          } />

          <Route path='/cart' element={<Cart/>}/>
          <Route path='/balenciaga' element={<Balenciaga/>}/>

        <Route path='/event' element={<Event></Event>}>
          <Route path='one' element={<div>첫 주문시 쿠폰 증정</div>} />
          <Route path='two' element={<div>생일기념 쿠폰 받기</div>} />
        </Route>

      </Routes>

    </div>
  );
}
function Event() {
  return (
    <div>
      <h4>오늘의 이벤트</h4>
      <Outlet></Outlet>
    </div>
  )
}

export default App;

코드는 현재 이러합니다.

안됩니다..
해보니깐 중괄호를 빼야 되는것같습니다..
  let result = useQuery(['작명'],()=>{
    axios.get("https://codingapple1.github.io/userdata.json").then((a)=>{
      console.log(a.data.name)
      return a.data
    })
  })
//이건 안됐습니다.


  let result = useQuery('작명',()=>
    axios.get("https://codingapple1.github.io/userdata.json").then((a)=>{
      console.log(a.data.name)
      return a.data
    })
  )
이걸로 하니깐 되네요. 함수의 return값에 대한 이해가 부족했던것 같습니다.

스터디한 결과로 코드는
 let result = useQuery(['작명'], async() => {
    try {
      const response = await axios.get("https://codingapple1.github.io/userdata.json")
      return response.data
    }catch(error){
      console.log(error)
      return {name : "errorrrr"}
    }
    
})

이렇게 변경해서 짜봤습니다.