모달 창에서 백그라운드 스크롤 비활성화하기

코드

useEffect(() => {
  // 현재 스크롤 위치 저장
  const scrollY = window.scrollY;
  // 스크롤 비활성화
  document.body.style.overflow = 'hidden';

  // cleanup 함수로 모달이 닫힐 때 스크롤 활성화 및 위치 복원
  return () => {
    // 스크롤 활성화
    document.body.style.overflow = '';
    // 스크롤 위치 복원
    window.scrollTo(0, scrollY);
  };
}, []);

React의 useEffect 훅을 사용하여 컴포넌트가 마운트될 때 특정 동작을 수행하고, 언마운트될 때 정리(cleanup) 작업을 수행하는 예제입니다. 이 코드는 특히 모달 창을 여는 상황에서 백그라운드 스크롤을 비활성화하고, 모달 창이 닫힐 때 스크롤 위치를 복원하는 데 유용합니다.

단계별 설명

1. useEffect 훅 사용:

   • 이 훅은 두 번째 인자인 빈 배열 [] 때문에 컴포넌트가 처음 마운트될 때만 실행됩니다.

2. 현재 스크롤 위치 저장:

   const scrollY = window.scrollY;

   • window.scrollY를 사용하여 현재의 세로 스크롤 위치를 저장합니다. 이는 나중에 스크롤 위치를 복원하는 데 사용됩니다.

3. 스크롤 비활성화:

   document.body.style.overflow = 'hidden';

   • document.body.style.overflow 속성을 'hidden'으로 설정하여 전체 페이지의 스크롤을 비활성화합니다.

4. 정리 함수 (cleanup function):

   return () => {
     document.body.style.overflow = '';
     window.scrollTo(0, scrollY);
   };

   • useEffect 훅의 반환 값으로 정리 함수를 제공합니다. 이 함수는 컴포넌트가 언마운트될 때 실행됩니다.
   • 먼저, document.body.style.overflow 속성을 빈 문자열 ''로 설정하여 스크롤을 다시 활성화합니다.
   • window.scrollTo(0, scrollY)를 호출하여 이전에 저장한 스크롤 위치로 페이지를 이동시킵니다. 이로써 모달이 닫힐 때 스크롤 위치가 원래 위치로 복원됩니다.

요약

이 코드는 모달 창이 열렸을 때 백그라운드 페이지의 스크롤을 비활성화하고, 모달 창이 닫힐 때 스크롤을 다시 활성화하며, 원래 스크롤 위치로 복원하는 기능을 합니다. useEffect 훅을 사용하여 컴포넌트의 생명 주기에 따라 이러한 동작을 자동으로 처리할 수 있습니다.