isLoading
, error
등으로 데이터 패칭 상태 확인 가능useQuery Hook으로 간단하게 사용 가능하다.
function func () {
const { isLoading, isError, data, error } = useQuery(['state', text], () => doSomething(text));
if (isLoading) {
return <div>loading...</div>
}
if (isError) {
return <div>Error : {error.message}</div>
}
return (
<div>
{data.map(some => (
<p key={some.id}>{some.text}</p>
))}
</div>
)
}
GET
요청으로 서버의 데이터를 조회할때 사용POST
, DELETE
등 서버의 데이터 변경 작업을 요청할때 사용fresh
상태를 유지할 수 있음function func() {
const mutation = useMutation(state => axios.post("/post", text));
return (
<div>
{ mutation.isLoading ? (
'Loading...'
) : (
<>
{ mutation.isError ? (
<div>Error</div>
) : null }
{ mutation.isSuccess ? (
<div>Success</div>
) : null }
<button
onClick={() => { mutation.mutate("") }}
/>
Post Request
</button>
</>
)}
</div>
)
}
mutate 함수를 사용해 원하는 인자를 담아 함수를 호출할 수 있다.
참고자료
https://tech.osci.kr/2022/07/13/react-query/
https://tech.kakao.com/2022/06/13/react-query/