2021/10/14~15 : 만들 수 있는 라이브러리는 직접 만들어쓰자

물론 언젠가 다시 사용할 수도 있지만, 특별한 이유가 생기지 않는한 저는 react-query를 사용하지 않기로 마음을 먹었습니다.

 

이 리포트는 2일분량입니다.

왜냐하면 그 1일에 react-query와 엄청난 사투를 벌였기때문입니다.

 

react-query의 useQuery는 2번째 인자로, 비동기 요청함수를 받습니다.

그리고 그 결과를 반환하여, 정상값이면 data라는 반환값으로 주는게 원칙입니다.

 

 

원래 코드는 위와 같았습니다.

useGetAllComments라는 커스텀훅에서 useQuery가 getAllComments라는 비동기 요청을 보내고 있는것이죠.

그리고 refetch를 요청하면, 다시 getAllComments가 호출되고 data가 갱신되게 됩니다.

 

문제는 여기서 발생했습니다.

1. 정상일때 로직

- 비밀댓글이 아닌 댓글 편집

- 편집 요청에 성공하면 댓글목록 refetch하여 갱신

- 갱신한 요청으로 인한 최신의 결과값이 data에 반영되어 댓글목록 리렌더링

 

2. 이슈가된 로직

- 비밀댓글 댓글 편집

- 편집 요청에 성공하면 댓글목록 refetch하여 갱신

- 갱신한 요청으로 인한 최신의 결과값이 data에 반영되지않고 댓글목록 리렌더링

 

분명 refetch를 하면, getAllComments 비동기 요청을 통해서, 서버에서 편집이 반영된 최신의 결과값이 반영되는 것을 개발자도구로 확인했습니다.

근데 useQuery의 data는 비밀댓글을 편집할때에는 업데이트되지 않았습니다.

 

즉, 위 코드에서 왼쪽섹션의 console.log(response.data)와 오른쪽섹션의 console.log(data)는 일치해야하는데,

알수없는 이유로 일치하지 않는 상황이 발생되었던 것입니다.

 

react-query의 캐싱기능때문인줄알고 key도 조작하고, stale time과 cache time도 조작해주었지만 무용지물이었습니다.

react key prop도 편집후에는 달라지도록 구현되어있기 때문에 전혀상관없었습니다.

 

react-query를 다라쓰에 7월부터 사용하고 있었지만, 이건 처음보는 이슈였습니다.

갱신로직상 이상한점도 없었습니다.

 

그렇게 하루를 원인을 찾느라 시간을 썼습니다.

그리고 결단을 내렸습니다.

 

react-query에서 내가 쓰고 있는 기능들은 내가 충분히 구현할 수 있는 것이므로 내가 만들어쓸랜다

 

 

그래서 useQuery와 useMutation의 인터페이스만 참고하고 react-query의 key기능을 제거한,

딱 필요한 기능만있는 커스텀 useQuery, useMutation이 탄생했습니다.

 

https://github.com/woowacourse-teams/2021-darass/blob/main/frontend/reply-module/src/hooks/api/useQuery.ts

GitHub - woowacourse-teams/2021-darass: 🧩 웹 페이지 어디든 간편하게 추가하는 댓글 모듈 서비스 "다라

https://github.com/woowacourse-teams/2021-darass/blob/main/frontend/reply-module/src/hooks/api/useMutation.ts

GitHub - woowacourse-teams/2021-darass: 🧩 웹 페이지 어디든 간편하게 추가하는 댓글 모듈 서비스 "다라

 

커스텀으로 만드니까 다음과 같은 이점이 있었습니다.

 

- 주기적으로 refetch하는 기능, 그리고 그것을 끄는 기능 제공

- 기존 react-query와 유사한 변수명

- useMutation의 에러처리도 useQuery처럼 관리 (react-query는 useMutation의 에러처리는 그냥 throw하는거라서 따로 try/catch를 해줘야했습니다.)

- 세부적인 동작들을 내 컨트롤 하에서 수행가능

 

물론 단점도 있었습니다.

- 캐싱 기능 미지원 (추가가능)

- useMutation에서 타입을 중복선언하는 부분이있음. (왜냐하면 query인자에 any가 포함되어있기 때문에)

 

아무튼 하루동안 끙끙 헤메던 이슈가, 직접구현하니 바ㅡ로 해결되었고

코드도 깔끔해졌습니다.

또한, 비동기로직의 세부사항을 이제 제가 모두 컨트롤할 수 있게되어서 마음이 편ㅡ안해졌습니다.

 

역시 라이브러리의 남용은 좋지 않고, 디버깅만 어렵게 할 뿐이었습니다.

또한, 기존 라이브러리를 제거하고 새롭게 구현해나가는 과정에서 그 라이브러리의 의도를 어느정도 파악할 수 있었고, 실력향상도 느낄 수 있었습니다.

앞으로 제 프로그래밍 원칙에 "내가 만들수 있다면, 최대한 내가 직접 만들어 쓴다"를 추가해야겠습니다.

 

또한, 시간이 날때마다 사용하고 있는 기존 라이브러리들을 사냥하여 직접제가 구현하는것으로 바꿔나가야겠습니다. 🔫

 

 

https://github.com/woowacourse-teams/2021-darass/pull/734

[FE][댓글모듈] 비밀댓글 기능을 구현한다. by zereight · Pull Request #734 · woowacourse-teams/2021-darass

https://github.com/woowacourse-teams/2021-darass/pull/735

[FE][댓글모듈] 게스트 유저의 비밀댓글에서는 닉네임이 보이도록 구현 by zereight · Pull Request #735