useEffect의 return 정리 함수

 useEffect(() => {
    if (isMenuOpen) {
      // 메뉴의 스크롤 부분 처리
      document.body.classList.add('overflow-hidden');

      return () => {
        document.body.classList.remove('overflow-hidden');
      };
    }
  }, [isMenuOpen]);

리액트의 useEffect는 return () => 으로 표현되는 정리 함수를 가지고 있다.

위의 코드에서 isMenuOpen이 true가 되면 classList.add 줄이 실행되고, return 정리 함수는 (if문 안에 있음에도 불구하고) 실행되지 않는다.
하지만 이게 완전히 인식되지 않은 건 아니고, 다음 isMenuOpen이 변경될 때를 대비하여 미리 '실행이 예약'된다.

이후 dependency 배열에 있던 isMenuOpen이 변경되면(false),
'예약'되어 있던 return 정리 함수가 실행되어 classList.remove 라인이 작동한다.

나중에 또 다시 isMenuOpen이 true가 되면 if문의 첫 번째 줄이 실행되고, isMenuOpen이 false로 다시 변경되면 '예약'되어 있던 return 함수가 실행되는 과정이 반복된다.

즉, return은 실행을 대기하고 있다가 이전의 효과를 '정리'해주는 함수인 것이다.

이 코드는 if-else 문으로 처리하는 코드보다 훨씬 있어(?)보이면서 리액트의 useEffect라는 훅이 가진 특성을 십분 활용한다. (의존성 배열, 정리 함수)

항상 if-else만 쓰면서 '더 고급진 코드를 쓰고 싶다'는 갈증이 있었는데, 이걸 이렇게 해결하게 되어서 기쁘다 😊