프로젝트를 진행하다보면 의도와는 다르게 클래스명이 겹쳐 CSS에 문제가 발생하는 경우가 종종 아니, 자주 있기 마련이다.

이러한 점을 방지하기 위해서, React 진영에서는 Style을 특정 객체 내에서만 적용 할 수 있도록 도와주는 라이브러리가 크게 2가지 있다. (하나는 npm 외부 라이브러리, 하나는 CRA 모듈)

Styled Component

외부 라이브러리로 관련된 정보에 대한 링크는 https://styled-components.com/

해당 라이브러리를 다운 받아 import 후, 독특하게 백틱을 활용하여 백틱 내에 CSS data를 넣고, 자기 자신을 가르키는 CSS는 기본 / 파생은 '&' 문자를 붙여 스타일 객체를 만든 뒤, 해당 스타일 객체를 JSX화 하여 사용하는 방식

import styled from "styled-components";

const Button = 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);
  }
`;

export default Button;

CSS Modules

https://create-react-app.dev/docs/adding-a-css-modules-stylesheet

기본적으로 분리 되어있는 css를 import 할 때, css 파일명과 확장자 사이에 module 구문을 넣는 것이 관례

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;

두 가지 방식 모두 개발자 도구를 통해 확인 시, 원 class의 이름이 난수화 되어 바뀌는 점을 볼 수 있음. 해당 난수화를 통해 특정 컴포넌트의 클래스명을 한정 지을 수 있으며, 한정 지은 클래스명을 통해 CSS를 별도로 활용하는 효과를 누릴 수 있게 된다.