[React] 리액트의 스타일링: CSS 모듈과 스타일드 컴포넌트

리액트로 작업을 할 때, 컴포넌트 단위로 스타일을 적용하고 싶다면 쓸 수 있는 방법이 몇 가지 있다. 여러 라이브러리, 프레임워크 등등... 그 중 기존의 CSS만 알아도 쉽게 사용할 수 있는 CSS 모듈과 스타일드 컴포넌트(styled-components)에 대해 알아보자.

1. CSS Module

✔CSS에서: 파일의 이름을 파일명.module.css의 형식으로 한다.
✔리액트에서: import styles from '파일명.module.css'; 로 불러와 적용한다.

⭕장점: 자체적으로 고유 해시값을 붙인 클래스를 생성해주기 때문에, 동일 프로젝트 내에서 CSS클래스의 이름 중복이 가능 → 따라서 네이밍 규칙이 간소화됨.

🚫단점: CSS파일의 수가 많아져 관리가 번거로워질 수 있음.

 

예시 코드

/* item.module.css */
.item {
  width: 5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.name {
  font-weight: 800;
}
.button {
  border: none;
  background-color: black;
  color: white;
}

 import styles from 'item.module.css'; 
 
 export default function Item(){
 	return (
    <div className={styles.item}>
    	<span className={styles.name}>이름</span>
    	<button className={styles.button}>확인</button>
    </div>
    );
 };

아래 캡쳐처럼 클래스에 고유 해시값이 붙는다.

---

2. Styled Components

자바스크립트 파일 안에서 CSS를 작성하는 방법.

Styled Components라는 이름은 정확히는 CSS-in-JS 기술을 사용하는 라이브러리의 한 종류를 말한다.

✔사용하려면: yarn add styled-components로 모듈 설치 (npm으로 설치 시 오류가 발생하니 yarn으로 하자)
✔리액트에서: import styled from 'styled-components';
✔컴포넌트에 적용: const 컴포넌트명 = styled.DOM요소`스타일링 내용`

⭕장점: 클래스가 아닌 컴포넌트에 자체에 스타일을 적용할 수 있음. 동적으로 스타일을 바꾸기 쉽다.

🚫단점: CSS파일을 사용하는 것보다 속도가 느림.

 

예시 코드

import React from 'react'
import styled from 'styled-components';

const Button = styled.button`
  background-color: black;
  color: red;
  font-weight: 800;
  padding: 0.25em 1em;
`;

function App() {
  return (
    <div className="App">
      <Button>버튼</Button>
    </div>
  );
};

export default App;

---

참고 자료

css-module문서

styled-components 공식 페이지