React-Query(1)

 

지역 상태 : useState - 컴포넌트 내에서만 사용하는 것

전역  상태 : 웹사이트 테마, 유저 정보 등

서버 상태 : api 통신할 때 필요한 상태들

 

전역 상태를 관리하는데는 리액트 쿼리가 맞지 않는다.

 

리덕스 : 전역 상태, 서버 상태 => 다 관리 가능하다.

 

 

 

---

리액트 쿼리를 사용하면?

1. 코드가 정말 단순해진다.

2. 캐시 관리 => 내가 굳이 서버에 요청을 안해도 될 때 => 서버의 부하를 줄여준다.

3. 서버 상태, 전역 상태 분리 가능.

 

API 호출 실패를 하면?

몇 번을 더 시도할지 재시도 횟수를 지정해 줄 수 있다. => 기본은 3번 재시도 한다.

const { isLoading, data, isError, error } = useQuery({
        queryKey: ['posts'],
        queryFn: () => {
            return axios.get('http://localhost:3004/posts');
        },
        retry: 1,
    });

 

retry로 지정하면 된다.

 

 

내가 필요한 데이터만 뽑아오고 싶을 때?

const { isLoading, data, isError, error } = useQuery({
        queryKey: ['posts'],
        queryFn: () => {
            return axios.get('http://localhost:3004/posts');
        },
        retry: 1,
        select: (data) => {
            return data.data;
        },
    });

 

select로 필요한 것만 뽑아올 수 있다.