[React] 반응형 웹 사이트(홈페이지) 만드는 법

React, 반응형 웹, react-media, 반응형 모바일, 반응형 사이트 

---

반응형 웹페이지(홈페이지)란 사용자의 화면 크기에 반응(Response) 한다고 해서 반응형 홈페이지라고 합니다.

즉 홈페이지 요소들의 사이즈가 사용자의 화면 크기에 따라 줄었다가 늘었다가 하는 것입니다.

React에서 반응형 웹 페이지를 구성하는 방법은 다음과 같습니다.

우선 react-media를 import 해줍니다. react-media에서 Media를 사용할 것입니다.

import Media from 'react-media'

 

그 다음 MEDIA_QUERIES를 작성해준다. 필자는 pc와 mobile로 나누었다.

const MEDIA_QUERIES = {
    pc: '(min-width: 1200px)',
    mobile: '(max-width: 1199px)',
}

그 다음 Desktop에 대한 html과 Mobile에 대한 html을 작성해주고 export할 html에 가져온다.

import Media from 'react-media'
const MEDIA_QUERIES = {
    pc: '(min-width: 1200px)',
    mobile: '(max-width: 1199px)',
}

const Desktopmode = (props, context) => (
    <div id="middle" className={styles.middleback}>
        this is desktop
    </div>
)
const Mobilemode = (props, context) => (
    <div id="middle" className={styles.middleback2}>
        this is mobile
    </div>
)
const test = (props, context) => (
    <div>
        <Media queries={MEDIA_QUERIES}>
            {matches=>{
                return(
                    <>
                        {matches.pc && <Desktopmode />}
                        {matches.mobile && <Mobilemode/>}
                    </>
                )
            }}
        </Media>
    </div>
    
);
export default test;

다음은 테스트한 결과이다. 이처럼 react-media만으로 쉽게 반응형 모바일을 만들 수 있다.

반응형 웹사이트

반응형 모바일 만드는법이 도움이 되셨으면 공감 부탁드립니다. 모르시는 부분들은 댓글로 남겨주세요.