[React] 모달 팝업 스크롤 제어

리액트 환경에서 모달 팝업시 body의 스크롤 없애기.

1. useEffect로 모달 컴포넌트 마운트, 언마운트 시 body에 스타일 지정

  useEffect(() => {
    document.body.classList.add('scrollHidden');
    return () => {
      document.body.classList.remove('scrollHidden');
    };
  }, []);

2. GlobalStyle 활용

const GlobalStyle = createGlobalStyle`
  body{ overflow: hidden; }
`;

function Detail(){
  	return (
		<>
        	<GlobalStyle />
        	<Content/>
        </>
	)
}