React-Query

38기 정관훈·2023년 1월 18일
0
post-thumbnail

# 정의

React-Query이란?

React를 위한 강력하고 성능 좋은 데이터 동기화 "전역 상태"를 건드리지 않고도 React 및 React Native 애플리케이션에서 데이터를 가져오고, 캐시하고, 업데이트할 수 있다. React Query는 종종 React에 대한 누락된 데이터 가져오기 라이브러리로 설명되지만 보다 기술적인 용어로 말하면 React 애플리케이션에서 서버 상태 를 가져오고, 캐싱하고, 동기화하고, 업데이트 하는 작업을 쉽게 만들 수 있다.

# 주로 사용되는 훅

1. useQuery

usequery는 데이터를 get 하기 위한 api이다. 첫번째 파라미터로 unique Key가 들어가고, 두번째 파라미터로 비동기 함수(api호출 함수)가 들어간다.
첫번째 파라미터로 설정한 unique Key는 다른 컴포넌트에서도 해당 키를 사용하면 호출도 가능하다. useQuery는 비동기로 작동하며. 한 컴포넌트에 여러개의 useQuery가 있다면 하나가 끝나고 다음 useQuery가 실행되는 것이 아닌 두개의 useQuery가 동시에 실행된다.

useQuery(key, function, options) 인자 3개를 받는다
	      ↑      ↑        ↑
        쿼리키  api호출함수  쿼리옵션

2. useMutation

post, update는 useMutation을 사용한다. React Query를 이용해서 서버의 데이터 변경작업을 요청할 때 사용한다. 일반적으로 mutation은 부가효과(side effect)를 일으키는 함수로, 여기서는 '서버에 부가효과를 일으키는 함수' 라는 의미를 내포한다.

const { data, isLoading, mutate, mutateAsync } =
                                useMutation(mutationFn, options);
          ↑                                       ↑         ↑            
        데이터                                  api호출함수  쿼리옵션
profile
프론트엔드 개발자 (22.9.19~~)

0개의 댓글