밍기적거린 사람 나야나,,
아무것도 안 한 사람도 나야나,,
갓생살기 집어던진 사람 나야나,,
React-Query 개념학습하기
프로젝트를 진행하면서 리액트 쿼리에 대한 존재를 알고 이 것은 어디에 쓰는 것인가 고민했었던 것이 어느덧.. 한달..? 전..
이제서야 리액트 쿼리에 관한 자세한 내용을 공부 해보겠습니다..
이전에 리액트 쿼리와 관련된 문서를 읽었지만 깊게 이해를 못하고 그저 api 요청을 보낼 때 더 효율적으로 쓸 수 있다! 로 끝나버렸습니다..
그래서 어디에 효율적이고 왜 쓰는지! 알아보도록 하겠습니다.
React-Query
우선, 리액트 쿼리는 라이브러리 중 하나로 fetching, caching, 서버의 데이터와 동기화 해주는 역할을 합니다.
제가 참고한 블로그에서는
비동기 Query (질의) 과정을 도와주는 라이브러리
라고 설명하고 있습니다!
데이터를 불러오는 과정에서 발생하는 비동기 문제를 보다 효과적으로 처리할 수 있도록 도와주는 역할을 하고 있기도 합니다. 그럼 어떤 장점을 갖고 있는 걸까요?
캐싱
우선 데이터 캐싱을 할 수 있습니다.
캐싱이란, 불러온 데이터를 고속 스토리지 계층인 캐시에 저장하여 기본 스토리지에 접근할 때 보다 빠른 요청이 가능하고 효율적으로 사용할 수 있는 것입니다.
리액트 쿼리를 통해서 불필요한 데이터 요청을 막을 수 있기 때문에 서버 과부화를 줄일 수 있습니다.
그렇지만, 데이터 변경이나 갱신이 필요한 경우에는 새로운 데이터를 불러와야합니다. 리액트 쿼리에서는 이와 관련된 옵션을 제공하고 있습니다.
- refetchOnWindowFocus : 브라우저에 포커스가 들어온 경우
- refetchOnMount : 컴포넌트가 DOM에 추가된 경우
- refetchOnReconnect : 재연결이 발생한 경우
- staleTime : 데이터의 상태가 fresh에서 stale로 변경되는 시간
- cacheTime : 데이터가 비활성화 상태일 때 캐싱된 채로 남아있는 시간
따라서 위의 옵션 설명을 보면 해당하는 상황일 경우 데이터 갱신을 제공하는 것으로 확인할 수 있습니다.
react hook 과 사용하는 형태가 비슷
데이터 fetching 을 할 때 사용하는 기능이 react hook 과 비슷한 형태로 사용됩니다.
GET 요청시 useQuery를 사용하고 PUT, UPDATE, DELETE 요청 시에는 useMutation를 사용하는 것이 기본적입니다.
리액트 쿼리를 설치해주고 나면 사용하고자 하는 위치에서 기본 세팅을 해주어야 합니다.
useQuery
import {
QueryClient,
QueryClientProvider,
useQuery,
} from 'react-query';
const queryClient = new QueryClient();
export default function Component() {
return(
<QueryClientProvider client={queryClient}>
// 이곳에 리액트 쿼리를 적용한 컴포넌트를 넣을 수도 있고 같은 컴포넌트에서 바로 리액트 쿼리를 적용할 수도 있겠죠???
// index.js에 입히면 app.js에서 리액트 쿼리가 있는 컴포넌트를 불러오면 되겠습니다!
</QueryClientProvider>
)
}
// 리액트 쿼리를 사용하려는 컴포넌트나 index.js 파일에 세팅해줍니다.이런식으로 기본 세팅을 해줄 수 있습니다. 그러면 리액트 쿼리를 어떻게 작성하는지도 알아보겠습니다.
import { useQuery } from 'react-query';
function QueryComponent () {
const [isLoading, data, error] = useQuery(
'githubData',
queryFn: () =>
fetch('https://api.github.com/repos/tannerlinsley/react-query').then(
(res) => res.json(),
));
if (isLoading) return 'Loading...'
if (error) return 'An error has occurred: ' + error.message
return(
// 출력될 내용들
)
}
// axios로 요청한다면~
import axios from 'axios';
function QueryComponent() {
const { isLoading, data, error } = useQuery({
'githubData',
async () => {
const response = await axios.get('https://api.github.com/repos/tannerlinsley/react-query');
return response.data;
}
});
if (isLoading) return 'Loading...';
if (error) return 'An error has occurred: ' + error.message;
return (
// 출력될 내용들
);
}
isLoading으로 로딩 여부를 파악하고, data로는 성공시 반환된 데이터, error는 요청 실패시 에러 여부를 확인할 수 있습니다.
useQuery 다음에 작성된 'githubData'는 쿼리 식별자로 사용이 됩니다. 캐싱, 재로드, 업데이트 등을 할 때 쿼리를 식별하는 용도로 사용할 수 있습니다.
포트폴리 프로젝트에 적용해보면서 직접 익히는 시간이 필요할 것 같습니다.. 절대 뭐 쓰다가 지쳐서 마무리 하는 건 아닙니다.. 크흠 우선 useQuery까지 알아보고 이를 직접 프로젝트에 적용시켜본 다음, useMutation에 대해서 알아보고 이를 또 프로젝트에 적용시켜 제가 구현했던 파트인 게시글 수정이나 삭제에 대해 적용해보는 시간을 가지며 학습해야겠습니다!!
https://kyounghwan01.github.io/blog/React/react-query/basic/#usequery
