[React] 컴포넌트에 스타일을 적용해보자 ④ media 속성

2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등)

2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트

2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자

2020/10/06 - [Web프론트엔드/리액트] - [React] 스토리북에 다양한 확장 도구(Addon) 추가

2020/10/07 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ① Text

2020/10/08 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ② Button

2020/10/08 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ③ Checkbox

---

 이번에는 스타일 관련 마지막 포스팅으로, media 속성을 이용한 반응형 스타일입니다. 반응형이라고 거창하게 적었지만, 디바이스의 해상도를 보고 스타일을 별도로 지정하는 정도입니다. 그럼 지난 시간에 작성했던 defaultStyles.js 을 열어서 하기와 같이 수정을 합니다. 잘 모르시는 분은 이 링크를 꼭 확인해주세요.

 

// 디바이스 최소 가로 사이즈
const DEVICE_MIN_WIDTH = {
  Desktop: 1281,
  Laptop: 1025,
  Tablet: 768,
  Mobile_Landscape: 481,
  Mobile_Portrait: 320,
};

// media속성으로 사이즈 정의
const screen = {
  desktop: `@media (min-width: ${DEVICE_MIN_WIDTH["Desktop"]}px)`,
  laptop: `@media (min-width: ${DEVICE_MIN_WIDTH["Laptop"]}px) and
  (max-width: ${DEVICE_MIN_WIDTH["Desktop"] - 1}px)`,
  tablet: `@media (min-width: ${DEVICE_MIN_WIDTH["Tablet"]}px) and
  (max-width: ${DEVICE_MIN_WIDTH["Laptop"] - 1}px)`,
  mobile_Landscape: `@media (min-width: ${DEVICE_MIN_WIDTH["Mobile_Landscape"]}px) and
  (max-width: ${DEVICE_MIN_WIDTH["Tablet"] - 1}px)`,
  mobile_portrait: `@media (min-width: ${DEVICE_MIN_WIDTH["Mobile_Portrait"]}px) and
  (max-width: ${DEVICE_MIN_WIDTH["Mobile_Landscape"] - 1}px)`,
  
  large: `@media (min-width: ${DEVICE_MIN_WIDTH["laptop"]}px)`,
  small: `@media (max-width: ${DEVICE_MIN_WIDTH["Tablet"]}px)`,
  
  print: "@media print",
};

// 기본 스타일 수치 정의
export default {
  size: {
    xsmall: 8,
    small: 12,
    medium: 16,
    large: 20,
    xlarge: 24,
  },
  color: {
    default: "#333333",
    error: "#FF0000",
    white: "#FFFFFF",
    black: "#000000",
    gray: "#CCCCCC",
    primary: "#FF5A5F",
    secondary: "#00A699",
  },
  screen, // 디바이스 사이즈
};

 

 디바이스 사이즈를 정의하고 media 속성으로 원하는 스크린 사이즈를 골라냈습니다. large는 laptop사이즈 이상 small는 tablet사이즈 이하입니다. 그리고 맨 아래에 있는 screen이라는 변수로 export 했습니다. 그럼 스타일 관련 포스팅의 두 번째인 Button 컴포넌트로 수정을 해보겠습니다. 그럼 다시 Button.jsx 열고 수정해보시죠!

 

// ..\test_project\src\components\Button.jsx

import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import withStyles, { css } from "../styles/withStyles";

class Button extends PureComponent {
...
// withStyles()함수를 사용해 defaultStyles.js 내용으로 매칭
export default withStyles(({ color, size, screen }) => ({
  default: {
    color: color.default,
    borderColor: color.black,
    backgroundColor: color.white,
    fontSize: size.medium,
    padding: 5,
    border: 2,
    borderRadius: 5,
    borderStyle: "solid",
    cursor: "pointer",
    [screen.small]: {
      width: "100%",
    },
  },
...
}))(Button);

 

 나머지 부분은 같고 위에서 추가한 screen변수가 추가되어, screen.small 사이즈이면 버튼을 화면에 꽉 채워줍니다. 실제로 많은 웹페이지에서 사용하는 방법이지요. 브라우저 창의 크기를 조절하면 동적으로 반영이 될 것입니다.

 

버튼이 화면에 꽉참

 

 지금까지 배운 것처럼 react-with-styles 라이브러리를 사용하면 리액트의 장점인 컴포넌트에 집중한 개발을 진행할 수 있습니다.

 

네 번에 걸쳐 배워본 스타일 컴포넌트 관련 글이 마음에 드셨는지 모르겠습니다^^?

 

참 마음에 드셔야죠!

---

2020/10/09 - [Web프론트엔드/리액트] - [React] 하이오더(HoC) 기능으로 컴포넌트 확장하기 ①