[Stack-Overflow 클론] 질문 상세보기 페이지 기능 구현에서의 실수

개요

스택오버플로우 홈페이지 클론 코딩 프로젝트 중 '질문 상세보기 페이지'를 구현하게 되었습니다.

 

한 페이지 안에 질문 상세조회, 투표, 댓글, 답변 등 아주 다양한 기능들이 포함되어 있습니다.

 

질문 작성 페이지와 마찬가지로 react-query 라이브러리를 급하게 공부하여 활용해봤는데.....

 

제대로 활용하지 못 했습니다.

 

그래서 그 과정을 적고, 잘못 파악한 부분을 제대로 정리하고, 다시 제대로 공부해야 하는 부분을 간추려 보고자 합니다.

 

 

 

화면 UI

질문 작성 페이지 UI는 다음과 같습니다.

 

질문 상세보기 페이지

 

 

구현 계획

react-query 라이브러리에서 GET 요청은 useQuery 훅을 사용합니다.

 

react-query 라이브러리의 최대 장점은 비동기 데이터를 캐싱하고,

해당 데이터에 변동이 생길 경우 쿼리 값을 업데이트를 할 수 있다는 점 입니다.

 

그 부분을 활용하기에 질문 상세보기 페이지는 아주 적합하다고 생각했습니다.

그 전의 경우엔 답변, 댓글을 달아서 질문 데이터가 변동되었을 때

업데이트된 데이터를 받기 위해 새로운 GET 요청을 해야했기 때문입니다.

 

그런데 처음 작성한 코드에서는 해당 캐싱 기능과 업데이트를 위한 GET 요청을 전혀 활용하지 못 했습니다.

그냥 react-query 라이브러리에 대해 공부를 적게 한 탓이었습니다.

어떤 부분에서 실수를 범했고, 그걸 어떻게 리펙토링 했는지 구체적으로 적겠습니다.

 

부족했던 점 / 고쳐야할 점

1. 캐싱으로 GET 업데이트를 적절히 조절하겠다고 계획해놓고 staleTime, cacheTime 을 지정하지 않았습니다.

 

두 개의 차이를 명확하게 이해하지 못한 탓이었습니다.

cacheTime 기본값이 있다는 걸 듣고, 그거면 끝인 줄 알고 착각해 포커스, 리마운트가 발생했을 때 refetch를 막는 걸 깜빡했습니다...

 

2. 비동기 데이터를 받아오기 전에는 early return 하자.

useQuery로 받은 데이터 중 일부를 자식 컴포넌트에 props로 넘겨주어야 했습니다.

 

그런데 props가 너무 많은게 흉해서 객체로 묶어 전달해주었습니다.

 

그런데 객체로 전해주려면 초기값을 지정해주어야 있어야 오류가 나타나지 않았습니다.

그래서 let 변수로 question 객체를 먼저 초기화 하고 isSuccess 되었을 때 재할당 해주었습니다.

하지만 마찬가지로 코드는 흉했습니다.

 

그런데 그냥 return 문 안에 컴포넌트를 isSuccess && 조건부 렌더링을 하면 되는거였습니다. ㅎㅎ

더 좋은 방법은 early return pattern으로 비동기 데이터를 받지 않은 상태일 땐 return null을 해주면 됩니다.

아직도 React와 Javascript를 이렇게나 모른다니 한숨만 나왔습니다.

 

3. InvaildateQueries, setQueryData에 대해 잘 몰라서 refetch() 함수를 props로 전달한 뒤, 강제로 리패칭 했습니다;;

 

대체 react-query 왜 쓴거지? 진짜 어리석었던 것 같습니다. 그냥 '오 refetch() 한 문장으로  되니까 편하네' 라고 생각했다는 게 공포스럽습니다.