[React] 반응형 웹(PC,모바일)을 구축해보자

Mido·2023년 3월 16일
0

기본기

목록 보기
14/18

요즘 PC를 거의 안 쓰는 애들이 많다면서??

라떼는 스마트폰이 없던 시절에 학창시간을 더 오래 보냈고 PC로 작업을 하거나 웹 페이지를 보는 게 좀 더 편하다. 그런데 요즘 애들은 아예 PC를 사용을 거의 하지않고 모바일로 인터넷을 이용한다는 이야기를 들었다.
(물론 나도 모바일이 불편하다거나 그런 건 전혀 아니고 PC와 스마트폰 모두 많이 사용한 세대이다.)

요즘은 다수의 웹 페이지에 들어가면 pc버전과 모바일 버전이 구분이 되어있는데 그걸 어떻게 구현하는 것일까?

물론 반응형 웹을 설계하는 다양한 방법이 있지만 그 중 몇 가지를 한번 배워보자.

리액트 react-device-detect 라이브러리를 설치해주고

yarn add react-device-detect

import {BrowserView, isMobile} from 'react-device-detect'

위처럼 사용하는 것이 가장 간단하고 쉽다.

if(BrowserView){~~}
if(isMobile){~~}

{ /* web */ }
      <BrowserView>
        WEB
      </BrowserView>
      { /* mobile */ }
      <MobileView>
        MOBILE
      </MobileView>

라이브러리 기능 자체적으로 pc와 모바일을 구분할 수 있다.
그냥 이게 다다 위처럼 사용하면 아주 간편하다.

그럼 디바이스의 크기에 따라 설정은 못하는 것인가?

라고 할 때 사용할 수 있는 것이 CSS의 미디어 쿼리(media queries)이다.

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mystyle.css" />

위와 같이 스크린의 최대, 최소 넓이를 구체적으로 정해서 css파일을 적용시킬 수 있다.
css파일 통째로 말고 위에 방식처럼 사용하려면

@media screen and (max-width: 768px) {
	body {
		background-color: black;
	}
}

위처럼 사용하면 된다. 넓이가 768px보다 작은 경우에는 body의 배경색을 검정으로 만드는 코드이다.

이번에 배운 것은 아주 간단한 기초 내용이고 반응형 웹을 유동적으로 보기 좋게 설계하는 것은 생각보다 쉽지는 않은 일이다. 많이 해봐서 감각을 익혀서 시간을 단축시키고 여러가지 테크닉을 익혀야 할 것이다.

profile
Front-End

0개의 댓글