resize

종류

사이드 프로젝트를 하는데, 화면크기와 사이드바에 따라 하위 컴포넌트의 크기를 감지해줘야하는 경우가 생겼다. 찾아본 결과로는 npm에서 resize-observer와 관련된 라이브러리를 사용하는 방법과 자바스크립트 이벤트중 하나인 resize를 이용해 미디어쿼리를 적용하는 방법이 있었다.

이유

이번에 내가 적용한 방법은 resize를 사용하는 것이었다. resize-observer을 사용하지 않은 이유는 모든 크기를 감지할 필요가 없었기 때문에 라이브러리 설치를 하는 것은 비효율적이라고 생각했다.

방법

  const [isNarrowWidth, setIsNarrowWidth] = useState(false);

  const controlWidth = () => {
    const width = window.innerWidth;
    if (width < 1024) setIsNarrowWidth(true);
 	else setIsNarrowWidth(false);
    }
  };
	// window 너비가 1024보다 작을 경우 state 값 변경하는 함수 만들기

  useEffect(() => {
    window.addEventListener('resize', controlWidth);
    return () => window.removeEventListener('resize', controlWidth);
  }, []);

useEffect를 사용할 때 의존성 배열에 값을 넣어주면 그 값이 변경될 때 마다 useEffect가 실행되고, 빈 배열일 경우에는 화면을 처음 그릴 때에만 실행이 된다. 하지만 위의 경우에는 빈 배열을 넣어주었는데 창크기에 변화를 줄 때마다 isNarrowWidth의 값이 바뀐다.

controlWidth를 의존성 배열에 넣어줄 경우에는 controlWidth 함수에 경고가 생긴다.. 이 부분은 좀 더 알아봐야할 문제다.