React는 Virtual DOM, functional componnets, State Management, HOC와 같은 용어와 등장했다. 이 중 상태 관리는 중요한 역할을 한다.
React 시작 전에 고려할 핵심 요소 중 하나다.
개발자들은 Flux, Redux, Mobx와 같은 패턴 및 라이브러리를 사용해서 상태를 관리한다. 그러나 앱에 복잡성과 상용구 코드를 추가한다.
리액트 쿼리란?
Flux, Rudux와 다른 접근 방식을 취하는 상태 관리 도구 중 하나다. 클라이언트 상태 및 서버 상태의 주요 개념을 소개한다. 다른 모든 상태 관리 패턴은 클라이언트 상태만 처리하공 가져오거나, 수신하거나, 구독해야 하는 서버 상태를 처리하기가 어렵기 때문에 React-query는 상태 관리 최고의 라이브러리다.
서버 상태를 처리하는 것 외에도 config 없이 잘 작동하며 사용자 지정할 수 있다.
react-query react-query-devtools axios
TypeScript
복사
GraphQL과 마찬가지로 React Query는 다음과 같은 유사한 핵심 개념을 기반으로 합니다.
•
쿼리
•
돌연변이
•
쿼리 무효화
리액트 쿼리 캐싱
보시다시피 useQuery 는 로더, 오류 메시지 및 실제 데이터를 표시하는 데 사용할 수 있는 데이터 와 상태 를 반환합니다 . 기본적으로 React Query는 데이터가 오래되었거나 오래되었을 때만 데이터를 요청합니다.
리액트 쿼리는 변경사항이 없는 한 구성 요소를 렌더링하지 않도록 데이터를 캐시합니다. 또한 useQuery와 함께 백그라운드에서 데이터를 새로 고치기 위해 특수 구성을 사용할 수 있습니다.
const { data, status } = useQuery("pokemons", fetchPokemons,
{
staleTime:5000,
cacheTime:10
});
TypeScript
복사
위의 구성을 사용하면 백그라운드에서 5초마다 반응 쿼리가 데이터를 가져오게 됩니다. 또한 브라우저가 캐시를 보관해야 하는 시간과 데이터를 가져오는 시도가 실패하는 횟수를 정의하는 cacheTime 및 retryTime을 설정할 수 있습니다.
Resetting cache with Query Invalidation
React Query will fetch data once the data/cache is stale. It happens when the default staleTime is passed. You can also programmatically invalidate the cache so that React Query will refresh the data.
In order to do that, use queryCache. It is a utility instance that contains many functions that can be used to further manipulate queries and invalidate the cache.
리액트 쿼리는 데이터/캐시가 오래되면 데이터를 가져옵니다. 기본 **staleTime*이 경과할 때 발생합니다.
또한 리액트 쿼리가 데이터를 새로 고치도록 캐시를 프로그래밍 방식으로 무효화할 수 있습니다.
이렇게 하려면 **queryCache를 사용하십시오.** 이것은 쿼리를 더 조작하고 캐시를 무효화하는데 사용될 수 있는 많은 함수들을 포함하고 있는 유틸리티 인스턴스
queryCache.invalidateQueries("pokemons")
TypeScript
복사
React Query Variables
We can also pass variables to the query. For that, we need to pass them down like an array.
const { data, status } = useQuery(["pokemons", 75], fetchPokemons);
TypeScript
복사
The first element will be the key and the rest of the elements are variables. in order to use the variable let's do some modifications to our fetchPokemons function
const fetchPokemons = async (key,limit) => {
const { data } = await axios.get(`http://pokeapi.salestock.net/api/v2/pokemon/?limit=${limit}`);
return data;
};
TypeScript
복사
Playing with Mutations
Mutations are typically used to create/update/delete data or perform server side-effects. React Query provides useMutation hook in order to perform mutations. Let's create a mutation to create a pokemon
Mutations는 일반적으로 데이터를 생성/업데이트/삭제하거나 server side-effects을 수행하는 데 사용됩니다. 리액트 쿼리는 돌연변이를 수행하기 위해 useMutation hook을 제공합니다. Mutations를 만들어 포켓몬을 만들자.
import React from "react";
import {useQuery } from "react-query";
function Pokemon() {
const [name, setName] = useState("");
const [mutateCreate, { error, reset }] = useMutation(text =>
axios.post('/api/data', { text }),
{
onSuccess: () => {
setName('')
},
});
return (
<div>
<form onSubmit={e=>{
e.preventDefault()
mutateCreate(name)
}>
{error && <h5 onClick={() =>reset()}>{error}</h5>}
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<br />
<button type="submit">Create Pokemon</button>
</form>
</div>
);
}
export default Pokemon;
TypeScript
복사
In this example, when we add a new pokemon name and click on Create Pokemon button it will do the mutation and retrieve data. If the mutation failed the error will be displayed. The error and data state can be cleared by using the reset function which will reset the mutation. The onSuccess function can be used to clear the state of the input or the name.
A mutation has more properties like onSuccess, isIdle, isLoading, isError, isSuccess. These can be used to handle errors and display relevant information for different states of the mutation.
이 예에서 새로운 포켓몬 이름을 추가하고 Create Pokemon 버튼을 클릭하면 Mutations가 일어나고 데이터가 검색됩니다. Mutations가 실패하면 오류가 표시됩니다.
오류 및 데이터 상태는 돌연변이를 Mutations하는 reset 기능을 사용하여 지울 수 있습니다.
onSuccess 함수를 사용하여 입력 상태 또는 이름을 지울 수 있습니다.
Mutations에는 onSuccess, isIdle, isLoading, isError, isSuccess 등의 속성이 더 있습니다.
오류를 처리하고 다양한 Mutations 상태에 대한 관련 정보를 표시하는 데 사용할 수 있습니다.
Conclusion
In conclusion, React Query is one of the best ways of fetching, caching, and updating asynchronous data. We just need to tell the library where do you need to fetch the data, and it will handle caching, background updates, and refresh data without any extra code or configuration.
It also provides some hook or events for mutation and queries to handle errors and other states of side effects which removes the need for useState and useEffect hooks and replace them with a few lines of React Query logic.
React Query deserves more attention in the React community due to these unique features and React Query has the potential to compete with Redux, Context, etc. You can find the code example in the following link.
Thanks for reading and if you have any questions, let me know in the comments below :)
결론적으로, 리액트 쿼리는 비동기 데이터를 가져오고, 캐싱하고, 업데이트하는 가장 좋은 방법 중 하나입니다. 라이브러리에 데이터를 가져와야 하는 위치를 알려주면 별도의 코드나 구성 없이 캐싱, 백그라운드 업데이트 및 데이터 새로 고침이 처리됩니다.
또한 useState 및 useEffect 후크의 필요성을 제거하고 그것들을 몇 줄의 반응 쿼리 논리로 대체하는 오류 및 기타 부작용 상태를 처리하기 위해 돌연변이 및 쿼리에 대한 일부 후크 또는 이벤트를 제공한다.
리액트 쿼리는 이러한 독특한 기능으로 인해 리액트 커뮤니티에서 더 많은 관심을 받을 만하며, 리액트 쿼리는 Redux, Context 등과 경쟁할 수 있는 잠재력을 가지고 있습니다. 코드 예는 다음 링크에서 확인할 수 있습니다.
읽어주셔서 감사드리며 궁금한 점이 있으시면 아래의 댓글로 알려주세요 :)
