React에서 창 너비 얻기

이 기사에서는 React에서 창 너비 값을 찾는 방법을 보여줍니다.

응답성은 현대 웹 개발의 기초 중 하나입니다. 요즘 사람들은 노트북, 데스크톱, 휴대폰, 심지어 게임 콘솔까지 다양한 장치에서 웹사이트를 탐색합니다.

응답성은 사용자의 요구에 응답하고 사용자의 장치에 따라 애플리케이션의 레이아웃을 조정하는 것을 의미합니다.

React에서 창 너비 얻기

모든 장치의 가장 중요한 기능은 화면 크기입니다. React 애플리케이션에서는 화면 크기를 픽셀 단위로 나타내는 숫자에 쉽게 액세스할 수 있습니다.

그런 다음 이 정보를 사용하여 React 앱의 모양과 기능을 변경할 수 있습니다. 화면 크기(픽셀 단위)를 사용하여 클래스를 조건부로 적용할 수 있습니다.

예를 들어 창 너비가 600px 미만인 경우 패딩은 10px이고 600px를 초과하는 경우 패딩은 20px입니다. 즉, 화면 너비를 사용하여 콘텐츠가 페이지에 얼마나 잘 맞는지 확인할 수 있습니다.

구성 요소 상태에 창 너비 값을 저장할 수 있습니다. 런타임 중에 창 너비가 변경되면 상태 값을 업데이트된 너비로 설정하도록 React 애플리케이션을 설정할 수 있습니다.

React 클래스 구성 요소에서 창 너비 가져오기

클래스 구성 요소에서 우리는 window 개체 자체에서 resize 이벤트를 수신하기 위해 .addEventListener() 메서드를 사용해야 합니다. 사용자가 창 너비를 변경할 때마다 이벤트 핸들러가 실행되어 창 너비 값을 업데이트합니다.

암호:

constructor(props) {
    super(props);
    this.state = { windowWidth: 0, windowHeight: 0 };
    this.handleResize = this.handleResize.bind(this);
}

componentDidMount() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
}

componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
}

handleResize() {
    this.setState({ windowWidth: window.innerWidth, windowHeight: window.innerHeight });
}

먼저 상태를 시작하고 windowWidth 및 windowHeight 속성을 기본값 0으로 설정합니다. handleResize 메서드도 바인딩합니다.

componentDidMount() 수명 주기 메서드에서 handleResize() 메서드를 처음으로 호출합니다. 이렇게 하면 페이지의 초기 크기와 resize 이벤트 처리기가 설정됩니다.

componentWillUnmount 수명 주기 메서드에서 이벤트 리스너를 제거합니다.

마지막으로 window 객체의 innerWidth 속성을 사용하여 창의 너비에 액세스합니다. innerHeight 속성을 사용하여 높이를 캡처합니다.

setState() 메서드를 사용하여 클래스 구성 요소의 상태를 업데이트하고 상태 속성을 이러한 차원으로 설정합니다.

React 함수 구성 요소에서 창 너비 가져오기

함수 구성 요소에서 사용자 지정 useWindowDimensions 후크를 만든 다음 이를 사용하여 창 너비 및 높이 값을 쉽게 가져올 수 있습니다.

useWindowDimensions 후크의 정의를 살펴보겠습니다.

암호:

import { useState, useEffect } from 'react';

function getWindowDimensions() {
    const width = window.innerWidth
    const height = window.innerHeight
    return {
        width,
        height
    };
}

export default function useWindowDimensions() {
    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
    useEffect(() => {
        function handleResize() {
            setWindowDimensions(getWindowDimensions());
        }
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return windowDimensions;
}

그런 다음 핵심 React 라이브러리에서 가져온 useEffect 후크를 사용하여 수명 주기 구성 요소에서 수행한 것과 동일한 작업을 수행합니다. 이벤트 수신기를 추가하고 한 번 실행하여 구성 요소가 마운트될 때 초기 창 크기를 가져오고 이벤트 수신기를 제거합니다. 마운트 해제됩니다.

일단 설정되면 다른 구성 요소 내에서 useWindowDimensions 후크를 가져와 창의 너비와 높이를 쉽게 얻는 데 사용할 수 있습니다.

암호:

const App = () => {
    const { height, width } = useWindowDimensions();
    return (
        <div>
            The width of your window: {width}
            The height of your window: {height}
        </div>
    );
}