@Feca [Web FE] 가 작성했어요.

<aside> ⚠️

리액트에 대한 얕은 수준의 이해가 있어야 읽을 수 있는 글이에요.

</aside>

이런 코드가 있어요.

간혹 다른 작업자의 코드를 읽다보면, 어느 순간 읽다가 ‘로직 자체에’ 의문을 던지는 경우가 생겨요.

useEffect(() => {
  if (data?.pagination.totalPages) {
    setCachedTotalPages(data.pagination.totalPages);
   }
}, [data?.pagination.totalPages]);

• 이 코드에 숨겨진 맥락을 직관적으로 이해할 수 있나요?
• 뭔가 페이지네이션으로 가져온 총 페이지 수를 캐싱하는 이펙트 같아요. 그런데 '왜' 캐싱해야하죠?
• 캐싱된 데이터는 어디서 어떻게 재활용될까요?

이런 경우의 대부분은, 코드를 작성한 본인의 의도가 굉장히 숨어 있는 경우예요.

작성자 외 다른 컨트리뷰터가 해당 코드를 보면 의도를 파악할 수 없고 PR이든 뭐든 히스토리를 뒤져서 알아내야해요.

코드를 술술 읽어나가다가 돌멩이에 걸리는거죠.

읽기 쉽고 직관적인 코드를 작성하려면,

이런 돌멩이 코드들을 최대한 치워야해요.

좀 더 위 코드에 맥락을 추가해볼게요.

처음에 예시로 들었던 캐싱 이펙트 로직에는 data 가 있는데,

이 data 의 출처를 살짝 코드에 더해볼게요.