React vol.4 (Styled Components, CSS Module)

개요

React JS 를 공부하면서 기본을 정리해두고자 작성

 

 

Styled Components

CSS를 JS안에서 쓸 수 있는 라이브러리중 하나이다. (CSS in JS)

React의 추구하는 방향인 컴포넌트 단위로 관리하는걸 스타일에도 적용할 수 있다는 점에서 높은 호환성을 띄고있다.

 

장점

• 하나의 컴포넌트이기 때문에 props로 여러가지 상태를 전달할 수 있는데 다양한 동적 스타일 적용을 쉽게 할 수 있다.(자유롭다)
• 기본 scss 작성법을 따르기 때문에 스타일 코드가 간결해 진다.
• scoped가 적용되므로 해당 컴포넌트가 선언된 곳에서만 스타일이 적용된다. (vue의 style 블럭의 scoped 같다.)
• 리액트 네이티브에서도 사용할 수 있다고 한다.
• 서버사이드 렌더링 지원

단점

• 러닝커브가 좀 있다. (학습하는데 시간이 걸린다.)
• 컴포넌트의 부피가 커진다.

usage

import styled from "styled-components";

const StButton = styled.button`
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
  @media (min-width: 768px) {
    width: auto;
  }
  &:focus {
    outline: none;
  }
  &:hover,
  &:active {
    background: #ac0e77;
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
`;

const Button = props => {
  return (
    <StButton type={props.type} onClick={props.onClick}>
      {props.children}
    </StButton>
  );
};

export default Button;

 

CSS Module

역시 scoped가 적용된 스타일(css)을 관리하기 위한 기술인데, 잠깐 예전의 역사를 되돌아 보면

지금도 그렇지만, 예전엔 더욱 SASS나 BEM 같이 클래스가 겹치지 않도록 개발자가 직접 관리 해야 하는 귀찮음이 있었다.

이걸 극복하고자 나온 것이 CSS Modules 이다. CSS Modules은 모든 스타일에 동적으로 파일에 선언된 CSS 선택자에 고유한 해시 문자열을 추가하여 CSS 속성이 겹치지 않게 만드는 방식

usage

 

Button.js

import React from "react";

import styles from "./Button.module.css";

const Button = (props) => {
  return (
    <button type={props.type} className={styles.button} onClick={props.onClick}>
      {props.children}
    </button>
  );
};

export default Button;

Button.module.css

.button {
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
}

.button:focus {
  outline: none;
}

.button:hover,
.button:active {
  background: #ac0e77;
  border-color: #ac0e77;
  box-shadow: 0 0