React에서 데이터를 가져오는 마법 같은 방법
13166 단어 webdevreactjavascriptfrontend
React 애플리케이션에서 쿼리하기 위한 기존 접근 방식을 빠르게 안내해 드리겠습니다. 이 중 대부분은 사소해 보일 수 있지만 실제 차이점react-query을 확인하기 위해 살펴보는 것이 중요합니다. (마법이야, 날 믿어😉)
JSON Placeholder API을 데이터 소스로 사용합니다. 우리는 주로 모든 게시물 목록과 개별 게시물의 두 가지 유형의 쿼리를 만들 것입니다. 모든 게시물 목록을 가져오는 후크를 작성해 보겠습니다.
const baseUrl = 'https://jsonplaceholder.typicode.com';
const usePosts = () => {
const [data, setData] = useState();
useEffect(() => {
const fetchData = async () => {
const res = await fetch(`${baseUrl}/posts`);
const posts = await res.json();
setData(posts);
};
fetchData();
}, []);
return { data };
};
이것은 익숙해 보일 것입니다. 오류나 로드 상태를 처리하지 않았음을 알 수 있습니다. 그것은 나쁜 습관입니다. 지금 해보자.
const usePosts = () => {
const [data, setData] = useState();
const [isLoading, setLoading] = useState(true);
const [error, setError] = useState();
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const res = await fetch(`${baseUrl}/posts`);
const posts = await res.json();
setData(posts);
setLoading(false);
} catch (error) {
console.log(error);
setError(error);
setData([]);
setLoading(false);
}
};
fetchData();
}, []);
return { data, isLoading, error };
};
와... 확실히 기분이 좋지는 않았습니다. 😒 후크가 두 가지 간단한 상태를 지원하도록 만들기 위해 엄청난 양의 코드를 추가해야 했습니다. 그리고 이 쿼리는 기본적으로 구성 요소가 다시 렌더링될 때마다 실행됩니다. 이것은 이상적이지 않습니다. 당신은 더 나은 자격이 있습니다.
백그라운드 업데이트는 어떻습니까? 부실 데이터? 쪽수 매기기? 프로그래밍 방식으로 쿼리를 다시 실행하시겠습니까?
행운을 빕니다. 🤷♂️
여기에서 react-query가 구출됩니다. 따라하고 싶다면 this repo을 상용구로 사용하세요.
이제 react-query를 사용하여
usePosts
후크를 리팩터링해 보겠습니다. 이전에 react-query를 사용해 본 적이 없다면 놀랄 것입니다.// hooks/hooks.js
const usePosts = () => {
const fetchData = async () => {
return fetch(`${baseUrl}/posts`).then((r) => r.json());
};
return useQuery('posts', fetchData);
};
응. 그게 다야. 나는 당신에게 말했다. 😎
usePost
후크에 대해서도 동일하게 수행할 수 있습니다.const usePost = (id) => {
const fetchData = async () => {
return fetch(`${baseUrl}/posts/${id}`).then((r) => r.json());
};
return useQuery(['post', id], fetchData);
};
이 코드 조각은 우리가 전통적인 접근 방식으로 처리한 모든 것을 처리하는 데 필요한 모든 것입니다. 더 깊이 잠수합시다.
아래 스크린샷에 표시된 아이콘을 클릭하여 react-query devtools를 엽니다. 열어 두십시오.
지금 웹 앱을 클릭하고 devtools를 주시하십시오. 쿼리가 실행될 때 기록되는 쿼리를 확인할 수 있습니다. 꽤 직관적입니다.
나는 react-query가 로딩, 오류 등과 같은 상태를 관리하는 것보다 훨씬 더 많은 일을 할 수 있다고 언급했습니다. 그 중 하나인 쿼리 무효화를 살펴보겠습니다. 간단히 말해서 쿼리 무효화는 각각의 쿼리가 '부실'한 것으로 간주하고 쿼리를 다시 실행하도록 react-query에 지시하는 것입니다. 시도해 봅시다.
게시물 목록 상단에 다시 가져오기 버튼을 추가할 예정입니다. 말할 필요도 없이 이 버튼을 클릭하면 앱이 게시물 목록을 다시 가져옵니다. 우리는 이를 위해 react-query를 사용하고 있기 때문에 이것은 우리에게 식은 죽 먹기가 될 것입니다. 😁
// pages/index.js
import { useQueryClient } from 'react-query';
export default function Home() {
const queryClient = useQueryClient();
const reFetchPosts = () => {
queryClient.invalidateQueries('posts');
};
return (
<Container>
<Button onClick={reFetchPosts}>Re-fetch</Button>
{data.map((post) => {
//...
})}
</Container>
);
}
그것이 우리가 추가해야 할 전부입니다. 이제 새로 추가된 다시 가져오기 버튼을 클릭하고 react-query devtools를 주시하십시오. 예상대로 쿼리를 다시 실행하는 것을 알 수 있습니다. 브라우저의 devtools에서 네트워크 탭을 사용하여 이를 확인할 수도 있습니다.
결론적으로 우리는 27줄의 코드를 취하여 단 7줄로 좁혀 작업할 더 많은 기능을 갖게 되었습니다. 그것은 나에게 좋은 거래처럼 들린다. 🤝
충격적이다. 나는 그것이 마법이라고 약속했다. 😊
이 기사가 마음에 들면 여기에서 저를 팔로우하고 . 나는 주로 소프트웨어에 대한 폭언을 트윗하고 내 작은 승리에 대해 자랑합니다. ⚡
아래에 댓글을 달아 토론을 시작하거나 질문을 하십시오. 기꺼이 대답하겠습니다. 🤗
참조:
Official react-query docs
표지 사진: Simon Berger
Reference
이 문제에 관하여(React에서 데이터를 가져오는 마법 같은 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dhaiwat10/a-magical-way-to-fetch-data-in-react-52m6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)