CSS 없이 React에서 미디어 쿼리 설정

1. React의 미디어 쿼리
2. CSS 없이 React에서 미디어 쿼리를 설정하는 클래스 구성 요소 만들기
3. CSS 없이 React에서 미디어 쿼리를 설정하는 기능적 구성 요소 만들기

2022년에 인터넷을 검색하는 사용자는 20년 또는 10년 전보다 훨씬 예측하기 어렵습니다. 이제 대부분의 사람들은 스마트폰으로 인터넷을 검색하고 이전보다 훨씬 더 나은 사용자 경험을 기대합니다.

고객은 선택의 폭이 넓기 때문에 기업은 고객의 관심을 끌 수 있는 최상의 웹 사이트를 디자인하기 위해 더 열심히 노력해야 합니다.

React의 미디어 쿼리

사용자는 화면 크기가 다른 기기에서 웹사이트를 방문하기 때문에 웹 개발자는 그에 따라 웹사이트 디자인을 조정할 방법을 찾아야 합니다. 미디어 쿼리를 사용하는 것은 애플리케이션의 응답성을 보장하는 기본 방법입니다.

React는 빠른 단일 페이지 애플리케이션을 구축하기 위한 가장 인기 있는 JavaScript 기반 라이브러리입니다. DOM으로 작업하고 HTML, CSS 및 JavaScript를 사용하여 애플리케이션을 구축했다면 React 작업으로 전환하는 데 어려움이 없을 것입니다.

React는 HTML과 유사한 템플릿 언어인 JSX를 사용합니다. 여러 면에서 HTML처럼 작동하지만 중요한 차이점이 있습니다. 예를 들어 인라인 스타일 설정은 JSX에서 다르게 작동합니다.

아시다시피 미디어 쿼리는 CSS에서 구현하기가 상대적으로 쉽습니다. 그러나 어떤 이유로 CSS 없이 미디어 쿼리를 구현하려는 경우 React에서 일반 JavaScript를 사용하여 구현할 수 있습니다.

CSS 없이 React에서 미디어 쿼리를 설정하는 클래스 구성 요소 만들기

클래스 컴포넌트는 오랫동안 React에서 상태 기능을 갖는 주요 방법이었습니다. 상태는 React 구성 요소가 사용자의 작업에 응답하도록 해야 합니다.

더 이상 고민하지 않고 React 클래스 구성 요소에서 미디어 쿼리를 설정하는 방법을 살펴보겠습니다.

예:

import React, { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            screenSizeFits: window.matchMedia("(min-width: 768px)").matches
        };
    }

    componentDidMount() {
        const adjustScreenSize = (e) =>
            this.setState({ screenSizeFits: e.matches });
        window
            .matchMedia("(min-width: 768px)")
            .addEventListener("change", adjustScreenSize);
    }
    render() {
        return (
            <div>
                {this.state.screenSizeFits && <h1>Laptop</h1>}
                {!this.state.screenSizeFits && <h3>Smartphone or Tablet</h3>}
            </div>
        );
    }
}

export default App;

screenSizeFits라는 state 속성이 하나 있는 App 구성 요소가 있습니다. window.matchMedia() 메서드를 사용하여 얻는 부울 값으로 초기화됩니다.

componentDidMount() 라이프사이클 메서드를 사용하여 이벤트 리스너를 추가하고 상태를 업데이트합니다. window 개체에 이벤트 리스너를 추가하여 화면 해상도가 변경될 때마다 그에 따라 state 변수를 업데이트합니다.

화면 해상도가 768픽셀보다 크면 screenSizeFits 속성이 true로 설정됩니다. 더 작으면 속성이 false로 설정됩니다.

마지막으로 간단한 && 논리 커넥터를 사용하여 state 속성 값을 기반으로 관련 텍스트를 표시합니다.

이 라이브 데모를 확인하여 작동 방식을 확인할 수 있습니다. 화면 크기를 더 크게 또는 더 작게 만들어보고 그에 따라 텍스트가 어떻게 변하는지 확인하십시오.

화면 해상도를 변경할 때마다 구성 요소는 이벤트 리스너를 고용하고 그에 따라 state를 업데이트합니다.

CSS 없이 React에서 미디어 쿼리를 설정하는 기능적 구성 요소 만들기

React v16.8부터 후크를 사용하여 기능적 구성 요소에 대화형 기능을 추가할 수 있습니다. React 커뮤니티는 개발자가 기능 구성 요소에서 미디어 쿼리를 쉽게 관리할 수 있도록 react-media-hook 라이브러리를 제안했습니다.

다음 명령을 입력하여 패키지를 설치할 수 있습니다.

npm i react-media-hook --save

그런 다음 useMediaPredicate 후크를 애플리케이션으로 직접 가져오고 사용자 장치의 화면 크기에 따라 조건부로 애플리케이션 스타일 지정을 시작할 수 있습니다.

예:

import React from "react";
import { useMediaPredicate } from "react-media-hook";

const App = () => {
    const moreThan720 = useMediaPredicate("(min-width: 720px)");

    return <div style={{border: moreThan720 ? "2px solid red" : ""}}>
        <button>SomeButton</button>
    </div>
};

이 예에서 변수 moreThan720은 useMediaPredicate 후크에 전달하는 인수가 true인지 여부에 따라 부울 값을 저장합니다.

그런 다음 삼항 연산자를 사용하여 인라인 스타일을 조건부로 설정합니다. 창 너비가 720px를 초과하면 테두리 속성을 다음 값으로 설정합니다. 2px solid red; 그렇지 않으면 국경이 없을 것입니다.