useEffect를 정리하되 너무 많이 하지는 마십시오.

많은 개발자들과 마찬가지로, 저는 요점에 있고 모든 보풀이 없는 코드를 작성하는 것을 좋아합니다. 코드를 가장 작은 형태로 만드는 것은 정말 만족스럽습니다. 그러나 어느 시점에서 간결함과 유지보수성은 같은 가닥의 반대쪽 끝을 잡아당기고 있습니다.

이것이 특히 나를 물린 곳은 a useEffect 의 정리 기능입니다.

시나리오

우리는 정말 간단한 useEffect로 시작합니다.

useEffect(() => thing.register(), []);

특별한 건 없겠죠? 글쎄, 나중에 여기로 돌아와서 괄호가 더 멋지게 보일 것이라고 결정했다고 가정해 봅시다. 그래서 변경됩니다.

useEffect(() => {
  thing.register();
}, []);

다만... 지금 문제가 있습니다. 이들은 같은 방식으로 행동하지 않습니다. 우리가 잊어버린 것은 thing.register()가 실제로 효과 정리에서 호출해야 하는 unregister 함수를 반환한다는 것입니다. 그래서 우리가 해야 할 일은 다음과 같습니다.

useEffect(() => {
  // now works the same as the implied return
  return thing.register();
}, []);

간결성 vs. 유지보수성

그래도 이 설정을 고려해 보겠습니다.

6개월 안에 register() unregister가 정리에서 호출할 useEffect 함수를 반환한다는 사실을 우리(또는 우리 팀의 다른 누군가)가 기억할까요? 우리는 단지 희망할 수 있습니다. 첫 번째 예에서 암시된 반환은 이를 훨씬 더 "마법"으로 만듭니다.

그것을 기억하기를 바라는 대신에 중간 변수를 만들어 더 명확하게 합시다.

useEffect(() => {
  const unregister = thing.register();
  return unregister;
}, []);

원본만큼 간결하지는 않지만 오랜 시간이 지난 후 돌아와서 그 코드가 무엇을 하는지 정확히 알 수 있습니다.

요약

리팩토링 후 코드의 유지 관리 가능성에 대한 영향을 고려하십시오.

useEffect에 향후 결함을 방지하기 위해 정리 기능이 있는 경우 이를 명확히 하십시오.