react query에서 placeholderData와 initial data 차이

둘은 비슷해보이지만 용도와 내부 동작이 다릅니다. placeholderData는 실제 데이터에 대한 응답을 받기 전 까지 "임시" 데이터를 보여주기 위한 용도로 사용됩니다. 내가 요청한 API의 응답이 도착하는 순간 화면에 보여지는 데이터는 실제 데이터가 됩니다. initialData는 "초기" 데이터를 보여주기 위한 용도로 사용됩니다. 내가 요청한 API의 응답이 도착하더라도 아직 데이터가 'fresh'한 상태라면 캐시에 남아있는 initialData가 화면에 보여지게 됩니다. 내부적으로 placeholderData는 캐시에 데이터를 저장하지 않는 반면, initialData는 데이터를 캐시에 저장합니다. 질문자 분이 말씀하신 것처럼 실제로 테스트 해보면 둘의 동작이 같다고 느껴지는데, 기본적으로 staleTime이 `0`으로 설정되있기 때문입니다. initialData가 존재하고 staleTime이 `0`이면 React Query는 곧바로 refetch를 실행해서 새 데이터를 가져옵니다. staleTime을 `1000*60`(ms)으로 바꿔보면 화면에 initialData가 1분 동안은 계속 남아있는 것을 확인할 수 있습니다. 헷갈리시면 placeholderData의 staleTime을 첫번째는 `0`으로, 두번째는 `1000*60`으로 한 번 바꿔보세요. 같은 결과를 확인하실 수 있을겁니다. placeholderData는 캐시에 아무것도 남지 않기 때문에 staleTime에 영향을 받지 않습니다. 둘의 차이점에 대한 자세한 내용은 React Query 메인테이너분이 작성하신 https://tkdodo.eu/blog/placeholder-and-initial-data-in-react-query 글을 읽어보시는 걸 추천드립니다.