반응형 웹 🤔?
🍪 반응형 웹이란?
반응형웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 모바일, 태블릿 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다.
🍪 반응형 이어야 하는 이유?
대부분의 사람들이 스마트폰,태블릿 PC를 이용합니다. 오직 PC만을 위한 웹사이트를 만들어서 모바일이나 태블릿 유저에게 부정적인 검색 경험을 제공한다면 잘 이용하지 않게 될것입니다.
반응형의 장점은 검색엔진에 친화적이라는 것 외에도 여러가지가 존재 합니다. 앞서 언급한 바와 같이 단 하나의 웹사이트로 다양한 디바이스에 대응함으로써 유지보수 및 추가 개발 이슈에 대해 시간과 비용면에서도 보다 효율적 이라는 것입니다.
💻 반응형 구현하기
⚙️ media query
@media [미디어 타입] and [미디어 특성] {
/* 스타일 작성 */
}
미디어 타입: screen, print, speech 등의 미디어 타입을 지정합니다. 생략 가능합니다.and: and 키워드를 사용하여 미디어 타입과 미디어 특성을 조합할 수 있습니다.미디어 특성: 뷰포트의 크기, 해상도, 기기 방향 등의 미디어 특성을 지정합니다. 미디어 특성은 width, height, min-width, max-width, orientation 등이 있습니다.
미디어 쿼리는 다음과 같은 예시처럼 조합하여 사용할 수 있습니다.
/* 미디어 타입이 screen이며, 뷰포트의 최소 너비가 768px 이상일 때 */
@media screen and (min-width: 768px) {
/* 스타일 작성 */
}
/* 미디어 타입이 print이며, 뷰포트의 해상도가 300dpi 이상일 때 */
@media print and (min-resolution: 300dpi) {
/* 스타일 작성 */
}
/* 뷰포트의 최대 너비가 767px 이하이며, 기기 방향이 세로일 때 */
@media (max-width: 767px) and (orientation: portrait) {
/* 스타일 작성 */
}
React를 사용하여 모바일 반응형 웹을 만들기 위해서는, 미디어 쿼리를 이용하여 뷰포트(viewport)의 크기에 따라 스타일을 조정해야 합니다. 이를 위해 CSS에서 @media 규칙을 사용하면 됩니다.
// MyComponent.module.css
.container {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 1rem;
}
@media (min-width: 768px) {
.container {
max-width: 800px;
}
}
@media (min-width: 992px) {
.container {
max-width: 1000px;
}
}
위 예시에서는, MyComponent 모듈에서 .container 클래스를 가진 요소에 대해 반응형 스타일을 적용하였습니다. @media 규칙을 이용하여 뷰포트의 크기가 일정 이상일 때, .container 요소의 max-width 값을 조정합니다.
미디어 쿼리는 다양한 미디어 특성과 값을 조합하여 원하는 조건에 맞게 스타일을 적용할 수 있습니다. 이를 활용하여 모바일 기기에서도 적절한 디자인을 제공할 수 있습니다.
⚙️ react-responsive
또한, React에서는 react-responsive 라이브러리를 사용하여 뷰포트 크기에 따라 렌더링할 컴포넌트를 선택할 수도 있습니다. 이 라이브러리를 사용하면, CSS에서 @media 규칙을 사용하지 않아도 간편하게 모바일 반응형 웹을 만들 수 있습니다. 다양한 디바이스와 화면 크기에 맞게 애플리케이션을 반응형으로 구현할 때 유용합니다.
react-responsive패키지를 설치합니다.npm install react-responsive npm install --save @types/react-responsive
import구문을 사용하여 useMediaQuery 훅과 MediaQuery 컴포넌트를 불러옵니다.import { useMediaQuery, MediaQuery } from 'react-responsive';3.
useMediaQuery훅을 사용하여 미디어 쿼리를 적용합니다.function MyComponent() { const isSmallScreen = useMediaQuery({ maxWidth: 767 }); return ( <div> {isSmallScreen ? ( <p>This is a small screen.</p> ) : ( <p>This is a large screen.</p> )} </div> ); }4.
MediaQuery컴포넌트를 사용하여 미디어 쿼리에 맞는 컴포넌트를 렌더링합니다.function MyComponent() { return ( <div> <MediaQuery minWidth={768}> <p>This is a large screen.</p> </MediaQuery> <MediaQuery maxWidth={767}> <p>This is a small screen.</p> </MediaQuery> </div> ); }
useMediaQuery훅은 미디어 쿼리를 직접 작성하거나,MediaQuery컴포넌트에서 사용할 수 있는 미디어 특성과 값을 객체로 전달할 수 있습니다.MediaQuery컴포넌트를 사용하면renderProp패턴을 사용하여 미디어 쿼리에 맞는 컴포넌트를 렌더링할 수 있습니다.
위와 같은 방법으로 react-responsive를 사용하여 애플리케이션의 반응형 구현을 간단하게 할 수 있습니다.
