리액트에서 비동기 처리 방법-컴포넌트 마운트 시(useEffect) 처리
useEffect hook을 사용하여 컴포넌트가 마운트될 때 비동기 요청을 통해 데이터를 가져오는 방식은 가장 기본적인 방식이다. 그렇게 가져온 데이터는 useState hook을 통해 생성한 state에 저장하여 활용했다.
비동기 로직의 문제점과 TanStack Query 등장배경
그러나 이렇게 구현했을 때는 로딩중이거나, 오류가 났을 때에 대한 처리를 하는 과정에서 여러 상태를 직접 관리해야했다. 그래서 상태 관리가 복잡했다. 또, 여러 컴포넌트에서 동일한 데이터를 패칭해야 하는 경우, 중복된 코드가 발생할 수 있었다. 데이터의 캐싱, 동기화, 리페칭 등과 같은 기능도 구현하는데에 많은 시간이 걸릴 것이다.
이런 문제들을 해결하기 위해 TankStack Query(React Query)와 같은 도구가 등장하였다. React Query는 서버 상태 관리에 특화된 기능을 제공하여 복잡한 비동기 로직을 단순화 하고, 캐싱, 동기화, 리페칭 등의 기능을 쉽게 구현할 수 있다.
주요 기능
- 데이터 캐싱 : 동일한 데이터를 여러 번 요청하지 않도록 캐싱하여 성능을 향상시킨다.
- 자동 리페칭 : 데이터가 변경되었을 때 자동으로 리페칭하여 최신 상태를 유지한다.
- 쿼리 무효화 : 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있다.
useQuery
useQuery는 데이터를 가져오기 위해 사용되는 TanStack Query의 대표적인 훅이다. 쿼리 키와 비동기 함수(패칭 함수)를 인자로 받아 데이터를 가져오고, 로딩상태, 오류 상태, 데이터 등을 반환한다. 이 훅을 통해 서버에서 데이터를 가져오고, 가져온 데이터를 컴포넌트에서 쉽게 사용할 수 있다.
useMutation
useMutation은 데이터를 생성, 수정, 삭제하는 등의 작업에 사용되는 훅이다. CUD에 대한 비동기 작업을 쉽게 수행하고, 성공 또는 실패 시에 추가적인 작업을 실행할 수 있기 때문에 useQuery와 함께 가장 대표적인 TanStack Query hook이라고 할 수 있다.
비동기 작업을 쉽게 처리한다는 말 안에는 작업이 완료된 후에 관련된 쿼리를 무효화하는 과정이 포함된다. 최신 데이터를 유지하는 데에 필수적인 요소이다.
invalidateQueries
invalidateQueries는 특정 쿼리를 무효화하여 데이터를 다시 패칭하게 하는 함수이다. 주로 useMutation과 함께 사용하여 데이터가 변경된 후 관련 쿼리를 다시 가져오도록 한다.
이를 통해 데이터가 항상 최신 상태로 유지될 수 있도록 도와준다. 예를 들어, 새로운 할 일을 추가한 후 기존의 할 일 목록을 다시 가져오도록 할 수 있다.
하는구나