npm install @tanstack/react-query
입력하기(index.js)
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/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>
);
function App(){
let result = useQuery(['작명'], ()=>
axios.get('https://codingapple1.github.io/userdata.json')
.then((a)=>{ return a.data })
)
}
function App(){
let result = useQuery(['작명'], ()=>
axios.get('https://codingapple1.github.io/userdata.json')
.then((a)=>{ return a.data })
)
return (
<div>
{ result.isLoading && '로딩중' }
{ result.error && '에러남' }
{ result.data && result.data.name }
</div>
)
}
App 컴포넌트에서 유저 이름을 가져오는 ajax 요청을 날리고 있는데
이 유저 이름 결과가 Detail 컴포넌트에도 필요하다면??
-> 유저이름을 props 전송하면 된다.
실은 props 전송 필요 없이 Detail 컴포넌트에 유저이름 ajax 요청하는 코드를 똑같이 또 적으면 된다.
정보에 감사드립니다.