[React] 브레이크포인트를 활용한 반응형 웹 디자인

개요

React를 사용하면 브레이크포인트(breakpoints)를 통해 반응형 디자인을 쉽게 구현 가능하다

React에서 브레이크포인트를 활용하여 반응형 웹 디자인을 구현하는 방법을 알아보자

반응형 웹 디자인(Responsive Web Design)

다양한 기기와 화면 크기에서 최적의 사용자 경험을 제공하기 위해 웹 페이지의 레이아웃을 유연하게 조정하는 기술

브레이크포인트란

브레이크포인트는 CSS 미디어 쿼리에서 특정 스타일을 적용하는 조건을 정의 하는 지점이다

브레이크포인트를 사용하면 화면 크기에 따라 다른 스타일을 적용할 수 있어서 다양한 기기에서 최적의 레이아웃을 제공할 수 있다

일반적인 브레이크포인트는 다음과 같다

모바일	0px ~ 599px
태블릿	600px ~ 1199px
데스크탑	1200px 이상

React에서 브레이크포인트 사용하기

React에서 브레이크포인트를 활용하는 방법에는 여러 가지가 있다.

가장 일반적인 방법은 CSS 미디어 쿼리를 사용하는 것과 JavaScript로 브레이크포인트를 감지하는 것

이 글에서는 해당 두 가지 방법을 탐구한다

CSS 미디어 쿼리 사용하기

CSS 미디어 쿼리는 반응형 디자인의 핵심 요소이다

CSS 파일에서 직접 미디어 쿼리를 정의하여 브레이크포인트를 설정할 수 있다

App.css

.container { padding: 20px; } 

@media (max-width: 599px) {
    .container { background-color: lightblue; }
}

@media (min-width: 600px) and (max-width: 1199px) {
    .container { background-color: lightgreen; }
}

@media (min-width: 1200px) {
    .container { background-color: lightcoral; }
}

App.jsx

import React from 'react';
import './App.css';
const App = () => {
    return (
        <div className="container">
            <h1>Responsive Design with CSS Media Queries</h1>
        </div>
    ); 
};
export default App;

JavaScript로 브레이크포인트 감지하기

React에서 JavaScript를 사용하여 브레이크포인트를 감지하고

그에 따라 컴포넌트의 스타일이나 레이아웃을 동적으로 변경할 수 있다

이를 위해 useState와 useEffect 훅을 사용한다

App.jsx

import React, { useState, useEffect } from 'react'; 

const App = () => {
    const [windowWidth, setWindowWidth] = useState(window.innerWidth);
    useEffect(() => {
            const handleResize = () => setWindowWidth(window.innerWidth);
            window.addEventListener('resize', handleResize);
            return () => window.removeEventListener('resize', handleResize);
    }, []);
    const getBackgroundColor = () => {
        if (windowWidth < 600) {
            return 'lightblue';
        } else if (windowWidth >= 600 && windowWidth < 1200) {
            return 'lightgreen';
        } else {
            return 'lightcoral';
        }
    };

    return (
        <div style={{ padding: '20px', backgroundColor: getBackgroundColor() }}>
            <h1>Responsive Design with JavaScript</h1>
        </div>
    );
};
export default App;

styled-components를 사용한 반응형 디자인

styled-components

스타일을 JavaScript 파일 내에서 작성할 수 있게 해주는 라이브러리

미디어 쿼리도 함께 사용할 수 있어 반응형 디자인을 쉽게 구현할 수 있다

App.jsx

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
padding: 20px;
background-color: lightcoral;
@media (max-width: 599px) { background-color: lightblue; }
@media (min-width: 600px) and (max-width: 1199px) { background-color: lightgreen; }
@media (min-width: 1200px) { background-color: lightcoral; } `;

const App = () => {
return (
    <Container>
        <h1>Responsive Design with styled-components</h1>
    </Container>
    );
};
export default App;

react-responsive 라이브러리 사용하기

react-responsive

반응형 디자인을 쉽게 구현할 수 있게 해주는 React 전용 라이브러리

미디어 쿼리를 직접 정의하여 브레이크포인트를 감지할 수 있다

App.jsx

import React from 'react';
import { useMediaQuery } from 'react-responsive';
const App = () => {
    const isMobile = useMediaQuery({ query: '(max-width: 599px)' });
    const isTablet = useMediaQuery({ query: '(min-width: 600px) and (max-width: 1199px)' });
    const isDesktop = useMediaQuery({ query: '(min-width: 1200px)' });
    const getBackgroundColor = () => {
        if (isMobile) { return 'lightblue'; }
        else if (isTablet) { return 'lightgreen'; }
        else if (isDesktop) { return 'lightcoral'; }
    };
    return (
        <div style={{ padding: '20px', backgroundColor: getBackgroundColor() }}>
            <h1>Responsive Design with react-responsive</h1>
        </div>
    );
};
export default App;

결론

React에서 브레이크포인트를 활용한 반응형 웹 디자인은 다양한 기기에서 최적의 사용자 경험을 제공하기 위해 매우 중요하다

CSS 미디어 쿼리, JavaScript를 통한 동적 스타일 변경, styled-components, react-responsive 등의 방법을 통해

쉽게 반응형 디자인을 구현할 수 있다

각자의 프로젝트에 맞는 방법을 선택하여 더 나은 UX를 제공해보자 화이팅