- 부모 컴포넌트, 자식 컴포넌트가 있다고 할 때 둘 다
[user, 1]쿼리 키에 해당하는 데이터를 필요로 한다고 한다면, 부모 컴포넌트와 자식 컴포넌트에서 각각useQuery함수를 호출해서 사용하는게 적합한지 아니면 부모 컴포넌트가 불러온 서버 데이터를 그대로 자식에게 props로 전달해주는 것이 더 적합한지 궁금합니다.
답변
상황에 따라 다름!
라이브러리를 만드는 사람인지, 서비스를 만드는 사람인지에 따라 다를 수 있음.
만약 라이브러리를 만드는 사람이라면, 추상화가 중요하기 때문에 후자의 방식이 좋을 수도 있겠지만
왠만한 서비스를 만드는 사람이라면, 응집도를 높히는 전자의 방식이 대부분의 경우에 좋음.
(tanstack-query 에서는 여러 컴포넌트에서 다양하게 패칭을 하든, 리패칭을 하든 알아서 캐싱하고 일괄적으로 효율적으로 처리해주기 때문에 굳이 props-drilling으로 번거롭게 하지 않는 방법이 개발 편의성 관점에서 좋음.)
이런 컨셉을 잘 갖고 있는 라이브러리중 Relay 라이브러리가 있는데 참고해보면 좋음!
- 서버 데이터를 필요로 하는 컴포넌트에서 직접
useQuery함수를 호출해서 사용하는 경우가 많은지, 아니면usePostQuery,useCommentQuery같이 커스텀 훅을 만들고 그 훅을 가져와서 사용하는 경우가 많은지 궁금합니다.
답변
이건 추상화에 대한 부분인데 사실 경험을 많이 해봐야 알 수 있는 부분임. 또한 상황에 따라 다르기도 함.
그런데 대부분은 custom hook으로 말아서 사용하는 편이긴 함.
만약, direct query를 쓰게 된다면 api가 바뀐다던지, comment라는 도메인의 이름이 변경된다던지 하는 경우 해당 쿼리를 사용한 모든 코드를 다 찾아서 고쳐야하는데
custom hook만 있으면 그 하나만 고치면 됨.
(그러나 추상화는 적당히 해야하기 때문에.. 적절한 레벨이 어느 정도인지는 경험을 많이 해보고 고민을 해봐야 알 수 있는 부분)
- 만약 컴포넌트 내부에
useQuery함수를 사용해서 외부의 서버 데이터에 대한 의존성이 생긴 상황에 해당 컴포넌트의 단위 테스트 코드를 작성해야 한다고 한다면.. 현업에서 보통 어떤 방법으로 하시는지 궁금합니다! - msw를 사용해보아라!