useMutation, useQuery의 차이

useMutation

• 데이터를 추가(POST), 수정(PUT), 삭제(DELETE)할 때 사용한다.
• 비동기 함수를 실행하여 성공과 실패 여부를 확인하고, 이에 따라 화면을 구성한다.
• useMutation은 직접 호출을 해야만 서버로 요청을 보낼 수 있다.
• invalidateQueries를 활용하여 데이터가 수정된다면 화면에 바로 업데이트 된다.
• onSuccess, onError, onSettled를 활용하여 요청 후 실행할 콜백 함수를 정할 수 있다.

useQuery

• 데이터를 가져올(GET) 때 사용한다.
• useQuery의 반환 값인 isPending, isLoading으로 상태를 파악하여 화면 구성이 가능하다.
• 컴포넌트가 렌더링될 때 자동으로 서버에 요청을 보낸다. 컴포넌트가 마운트 될 때 한 번만 실행한다.

Query Key
query key는 tanstack query에서 매우 중요한 부분을 차지한다.
key를 사용해서 데이터를 캐싱, 관리하기 때문에 신중한 관리가 필요하다.

• key 값으로 데이터를 관리하기 때문에 key 값은 유니크한 값으로 지정해야하며 다른 key 값과 중복해서 사용하면 안된다.
• key 값을 배열로 사용하여 의도를 명확하게 하고, 여러 값을 조합하여 key를 유연하게 관리할 수 있다.
• key 값은 값이 변경될 때 데이터를 다시 불러오기 때문에 필터 같이 데이터가 자주 변하는 기능에는 변수로 key 값을 지정해줘야 한다.
• key 값의 유지 보수와 충돌 방지를 위해 개별 파일을 사용하여 관리하는 것이 유용하다.
• key를 객체로 관리하면 순서에 상관이 없지만 배열로 관리하면 값이 같더라도 순서가 다르면 다른 key로 인식하기 때문에 순서에 유의해야한다.

// 예시
// 다음 세 가지는 모두 같은 쿼리로 인식한다
useQuery({ queryKey: ['posts', { username, userEmail }], ... });
useQuery({ queryKey: ['posts', { userEmail, username }], ... });
useQuery({ queryKey: ['posts', { userEmail, username, other: undefined }], ... });
// 다음 세 가지는 모두 다른 쿼리로 인식한다
useQuery({ queryKey: ['posts', username, userEmail], ... });
useQuery({ queryKey: ['posts', userEmail, username], ... });
useQuery({ queryKey: ['posts', undefined, userEmail, username], ... });