React Query

bisari31·2022년 5월 17일
0

React Query

리액트 쿼리를 사용하면 간결하게 패칭 로직을 작성할 수 있다.

const [isLoading, setLoading] = useState(false)
const [isError, setError] = useState(false)
const [data, setData] = useState({});
--------------------------------------------
const {status, data, error, isFetching} = useQuery(() => fetch(url))

흔한 요청 방식의 문제점

  • 데이터가 모든 애플리케이션 인스턴스에 공유되며 다른 사용자에 의해 임의로 변경된다.
  • 데이터가 최신 여부를 보장할 수 없으며 항상 갱신이 필요하다.
  • 최적화된 요청 작업을 위해 캐시를 조작할 수 있어야 한다.

useQuery

const [isLoading, setLoading] = useState(false)
const [isError, setError] = useState(false)
const [data, setData] = useState({});

useEffect(() => {
	const fetchData = async () => {
    setError(false)
  	setLoading(true)
  	
  	try {
    	const response = await axios(url)
        setData(response.data);
    } catch (error) {
        setError(true)
    }
     setLoading(false)
  }
  	fetchData()
}, [])

---------------------------------------------
const { data, isFetching, isError, error } = useQuery('api', () => useAxios(text, 1))

useMutation

데이터 생성, 업데이트, 삭제에 주로 사용된다.

queryCache

React Query는 불러온 데이터를 캐싱한다.
staleTime 옵션을 설정하지 않으면 저절로 최신의 상태를 잃게 된다.

react-query 상태

  • fresh: 새롭게 추가된 쿼리 & 만료되지 않은 쿼리 -> 컴포넌트가 마운트 업데이트 되어도 재 요청 x
  • fetching: 요청 중인 쿼리
  • stale: 만료된 쿼리 -> 컴포넌트가 마운트,업데이트 되면 데이터 재요청
  • inactive: 비활성화된 쿼리 -> 특정 시간이 지나면 가비지 컬렉터에 의해 제거

데이터 요청

  • data: 서버 요청에 대한 데이터
  • isLoading: 캐시가 없는 상태에서의 데이터 요청 중인 상태 (true/false)
  • isFetching: 캐시의 유무 상관없이 데이터 요청 중인 상태
  • error: 서버 요청 실패(object)

참고

0개의 댓글