🔮 React - 9. 컴포넌트 스타일링

리액트에서 컴포넌트를 스타일링 할 때는 다양한 방식을 사용할 수 있습니다.

회사마다 요구하는 방식이 다르고 개발자마다 각자 취향에 따라 선택해서 사용할 수 있습니다.

 

자주 사용되는 스타일링 방식

• 일반 CSS : 가장 기본적인 방식
• Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해 줍니다.
• CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션 입니다.
• styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해줍니다.

🔮 리액트 프로젝트 생성

$ yarn create react-app [폴더명]

$ cd [폴더명]

$ yarn start

Sass 사용하기

$ yarn add sass

• Sass는 .sass와 .scss 두 가지가 있습니다.
• SCSS는 Sass의 3버전 이후 추가된 문법으로서, CSS와의 호환성이 더 높습니다.
• SCSS는 기본적으로 .scss 확장자를 가지며, 중괄호{ }와 세미콜론(;)을 사용합니다.
• 리액트에서 SCSS를 사용하려면 관련 라이브러리를 설치하고, import 구문을 사용하여 SCSS 파일을 불러와서 사용합니다.

import React from "react";
import "./0418_1_style.scss"

const MyComponent = () => {

  return (
    <div className="my-component">
      <h1 className="title">안녕하세요. 리액트 세상에 오신 것을 환영 합니다.</h1>
    </div>
  );
}

export default MyComponent;

$primary-color: #007bff;

.my-component {
  background-color: $primary-color;
}

.title {
  font-size: 2em;
  color: #fff;
}

응용 예제

import React from "react";
import "./0418_2_SassComponent.scss"

const SassComponent = () => {

  return (
    <div className="SassComponent">
        <div className="box red"></div>
        <div className="box orange"></div>
        <div className="box yellow"></div>
        <div className="box green"></div>
        <div className="box blue"></div>
        <div className="box navy"></div>
        <div className="box purple"></div>
    </div>
  );
}

export default SassComponent;

@import "./styles/utils.scss";

.SassComponent {
  display: flex;
  // .SassComponent .box 와 같음!!
  .box {
    background: red;
    cursor: pointer;
    transition: all 0.3s ease-in;
    
    // .box와 .red를 함께 사용한다는 의미
    &.red {
      background: $red;
      @include square(1);
    }
    &.orange {
      background: $orange;
      @include square(2);
    }
    &.yellow {
      background: $yellow;
      @include square(3);
    }
    &.green {
      background: $green;
      @include square(4);
    }
    &.blue {
      background: $blue;
      @include square(5);
    }
    &.navy {
      background: $navy;
      @include square(6);
    }
    &.purple {
      background: $purple;
      @include square(7);
    }
  }
}

utils 함수 분리하기

여러 파일에서 사용될 수 있는 Sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필요한 곳에서 쉽게 불러와 사용할 수 있습니다.

@import

src/styles/utils.scss

$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$navy: #5c7cfa;
$purple: #7950f2;

// 믹스인 만들기 : 재사용되는 스타일 블록을 함수처럼 만들어 사용
@mixin square($size) {
  $calculator: 32px * $size;
  width: $calculator;
  height: $calculator;
}

SassComponent.scss

@import "./styles/utils.scss";

.SassComponent {
  display: flex;
  // .SassComponent .box 와 같음!!
  .box {
    background: red;
    cursor: pointer;
    transition: all 0.3s ease-in;
    
    // .box와 .red를 함께 사용한다는 의미
    &.red {
      background: $red;
      @include square(1);
    }
    &.orange {
      background: $orange;
      @include square(2);
    }
    &.yellow {
      background: $yellow;
      @include square(3);
    }
    &.green {
      background: $green;
      @include square(4);
    }
    &.blue {
      background: $blue;
      @include square(5);
    }
    &.navy {
      background: $navy;
      @include square(6);
    }
    &.purple {
      background: $purple;
      @include square(7);
    }
  }
}

styled-components

• 최근 많이 쓰이는 방식은 자바스크립트 파일 안에 스타일을 선언하는 방식 입니다.
• 이 방식을 CSS-in-JS라고 부릅니다.

$ yarn add styled-components

• styled-components와 일반 className을 사용하는 CSS/Sass를 비교했을 때,
  style-components의 가장 큰 장점은 props 값으로 전달 해주는 값을 쉽게 스타일에 적용할 수 있다는 것 입니다.

import styled, { css } from "styled-components";

const Box = styled.div`
  background: ${(props) => props.color || "blue"};
  padding: 1rem;
  display: flex;
  width: 1024px;
  margin: 0 auto;
  /* 최대 너비가 1024px 일 때, 768px로 변경 */
  @media (max-width: 1024px) {
    width: 768px;
  }
  @media (max-width: 768px) {
    width: 90%;
  }
`;

const Button = styled.button`
  background: #fff;
  color: #000;
  border-radius: 4px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 600;
  &:hover {
    background: rgba(255, 255, 255, 0.9);
  }
  ${(props) =>
    props.inverted &&
    css`
      background: none;
      border: 2px solid #fff;
      color: #fff;
      &:hover {
        background: #fff;
        color: #000;
      }
    `};
    & + button {
      margin-left: 2rem;
    }
`;

const StyledComponent = () => {
  return (
    <Box color="orangered">
      <Button>안녕하세요.</Button>
      <Button inverted={true}>테두리만..</Button>
    </Box>
  );
};

export default StyledComponent;