[BookNote] 북노트 작성 중 버벅임 개선(feat. react v18)

[soryeongk]

📌 내용

• 책추가에서 사용된 debounce를 커스텀 훅으로 변경하였습니다.
• 북노트 큰 질문과 답변에서의 버벅임을 개선했습니다. 이를 위해 react 18로 업그레이드를 진행하고, useDeferredValue를 사용해 커스텀훅을 만들었습니다. 하지만 여전히 북노트가 방대해지면, 버벅임이 조금 남는 것으로 보입니다. Next.js 마이그레이션 진행하면서 한 번 더 확인해봐야할 것 같습니다.

<참고> - 곧 제 것도 정리해서 올려보죱

• react 18 upgrade: 리액트 공식 문서
• recoil update: facebook github
• useDeferredValue: 리액트 공식 문서
• useDeferredValue discussions
• useTransition vs useDeferredValue: 예시 영상
• useTransition & useDeferredValue: 한글 블로그

📌 내가 알게 된 부분

• react 18 업그레이드에서 react, react-dom, recoil 뿐 아니라 @types도 확인이 필요하다는 것! 타스는 역시..
• useDeferredValue는 디바운싱이나 쓰로틀링과 유사하긴 하지만 timeout을 지정하는 용도는 아니다. urgent update와 deferred update를 나누기 위한 것이다. 책추가에서 디바운싱을 사용한 가장 큰 이유는 모든 변경마다 api가 호출되는 것을 막기 위함인데, useDeferredValue는 "급한 update는 아니니까 리액트 렌더링이 바쁘지 않을 때 처리해죠~" 라는 의미라서 결국 책추가 input에서의 변화를 모두 감지해 api 호출을 보내는 것은 동일하다. 디바운싱보다는 더 자주 update를 하는 것! 그래서 북노트에는 useDeferredValue를 적용해, 모든 변경을 감지하고, 리액트가 여유가 있을 때 state를 업데이트하도록 했다. 책추가의 경우 모든 변경마다 api 호출을 보내지 않고, 200ms의 지연을 시키기 위해서 주함이가 만든 debounce를 그대로 사용했다.
• useDeferredValue에 timeoutMS를 지정하는 예제가 있는데, 코드에서는 over argument취급을 당해서 삽질을 했는데, 이 부분은 최근 업데이트로 스펙아웃되었다. (참조: facebook github(클릭))

📌 질문할 부분

• debounce 부분의 변수명이 헷갈릴 수 있을 것 같은데, 더 좋은 이름이 떠오르지 않습니다. 주석으로만 대체해도 되려나욤?
• addBook에 있는 handleSearchBook의 reset argument는 검색 결과가 15개 이상일 경우의 처리를 위해 넣어둔 인자 맞나요? (하기 코드 참고)

const handleSearchBook = async (query: string, reset: boolean) => {
  const paramsAPI = {
    query,
    sort: "accuracy",
    // page: 1,
    size: 15,
  };

  const { data } = await searchBook(paramsAPI);

  if (reset) {
    setBooks(data.documents);
  } else {
    setBooks(books.concat(data.documents));
  }
};

[joohaem]

고생하셨습니다🔥🔥 네이밍도 충분한 것 같아요!

handleSearchBook 에 대해서 @Gyuminn 님이 답변 주실 수 있을 것 같습니다~ ~