React Query에서 mutation 이후 데이터를 업데이트하는 4가지 방법

• React Query는 데이터 fetching 라이브러리로, 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 할 수 있도록 도와준다. 이를 통해 클라이언트 상태와 서버 상태를 나누어 생각할 수 있게 해주며, 서버 데이터를 잘 다룰 수 있도록 캐싱 및 재조회 옵션을 제공한다.

• React Query는 서버 데이터를 조회하는 query와 서버 데이터를 가공하는 mutation을 나누어 사용한다. query는 선언적으로 사용되며 사이드 이펙트를 발생시키지 않는 반면, mutation은 명령형으로 사용되며 사이드 이펙트를 발생시킬 수 있다. 이 둘을 나누어 사용함으로써 데이터 관리의 효율성을 높인다.

• 클라이언트의 서버 데이터는 서버에서 조회해온 데이터를 클라이언트 상태로 전환한 것을 말하며, 이를 화면에 그려주는 역할을 한다. React Query의 useMutation 훅을 사용해 mutation을 실행할 수 있지만, 이는 서버에 API 요청을 보내 데이터를 변경하는 것이지 클라이언트의 데이터를 변경시키지는 않는다.

• 클라이언트의 데이터를 업데이트하려면, 서버에서 변경된 데이터를 받아와서 클라이언트 데이터를 업데이트하는 방법과 클라이언트에서 요청 데이터로 적용하는 방법이 있다. 이 중 서버에서 변경된 데이터를 받아오는 방법은 response에 변경된 데이터를 받는 방법(setQueryData)과 요청 성공 후 재조회를 통해 데이터를 받는 방법(invalidateQueries)이 있다.