react get browser size

react는 직접적으로 dom을 조작하는 것을 지양한다.

태생 자체가 virtual dom을 사용하여 효율적인 렌더링을 하기 위해 만들어 졌기 때문이다.

하지만 dom을 조작해야하는 상황이 있다. 브라우저의 width나 height를 가져오기 위해서는 dom을 조작할 수 밖에 없다.

개인적으로 hooks가 더 편하기 때문에 hooks 코드를 사용했다.

 const size = useWindowSize();

  function useWindowSize() {
    const isClient = typeof window === 'object';

    function getSize() {
      return {
        width: isClient ? window.innerWidth : undefined,
        height: isClient ? window.innerHeight : undefined
      };
    }

    const [windowSize, setWindowSize] = useState(getSize);

    useEffect(() => {
      if (!isClient) {
        return false;
      }

      function handleResize() {
        setWindowSize(getSize());
      }

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

    return windowSize;
  }

nextjs 이기 때문에 useWindowSize 안에 isClient변수를 통해 클라이언트 사이드 렌더링에서만 작동하도록 한다.

getSize 함수를 통해 브라우저의 width와 height 값을 가지고 온다

const [windowSize, setWindowSize] = useState(getSize); 를 통해 접속 시점의 width와 height를 state에 넣는다

useEffect를 통해 클라이언트 사이드 렌더링 일 시에 size가 변경 될 시에 state에 값을 변경한다

여기서 중요한 것은 addEventListener를 통해 'resize'가 일어 날 시에 state가 변경이 되도록 하는 것인데

return부분에서 removeEventListener를 통해 이벤트를 제거해 주어야 한다.

return은 class 컴포넌트에서 componentWillUnmount와 비슷한 동작을 한다.

removeEventListener를 하지 않을 경우 react가 에러메세지를 내뿜어 내는데, dom자체에 이벤트를 붙이는 것이므로 제거하지 않을 시에 

이벤트가 붙어있는 컴포넌트가 unmount되어도 addEventListener가 남아있기 때문에 sideEffect(부작용)이 일어날 수 있다.

비전공 주니어 개발자로 단어 선택이나 개념적인 부분이 글로 잘 표현이 안되었을 수 있습니다.

틀렸다고 생각하는 부분은 말씀해 주시면 반영하겠습니다. :)