컴포넌트 스타일링

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

• 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식
• Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 css 문법을 사용하여 css코드를 더 쉽게 작성 가능
• CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 클래스와 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션
• Styled-Components : 스타일을 자바스크립트 파일에 내장시키는 방식

1. 일반 CSS

기존에 사용하던 일반적인 CSS 시스템입니다.

import React, { Component } from 'react';
import './App.css';

class App extends Component {
	render() {
		<div className="App">
			Hello Component
		</div>
	}
}

.App {
	text-align: center;
	color: blue;
	font-size: 14px;
}

💡 CSS를 작성할 때 클래스가 중복되지 않도록 특별한 규칙을 사용하거나, CSS Seletor를 활용합니다.

CSS Selector를 사용하면 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있습니다.

// .App 안에 들어있는 .logo에 스타일을 적용하는 예제
.App .logo {
	width: 100px;
	height: 100px;
}

2. Sass

CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 코드의 재활용성을 높여 줄 뿐만 아니라 가독성을 높여서 유지 보수를 쉽게 해 줍니다.

Sass 에서는 두 가지 확장자 .scss 와 .sass를 지원합니다.

두 확장자의 문법은 꽤 다릅니다. 주요 차이점은

• .sass 확장자는 중괄호와 세미콜론을 미사용
• scss 확장자는 기존 css를 작성하는 방식과 문법이 비슷함

// sass
$font-stack: Helvetica, sans-self
$primary-color: #333

body
    font: 100% $font-stack
    color: $primary-color

// scss
$font-stack: Helvetica, sans-self;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

자세한 사용법은 Sass 가이드 참고

3. CSS Module

CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]__[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술입니다.

// CSSModule.module.css
.wrapper {
	background: black;
	color: white;
	font-size: 2rem;
}

.inverted {
	color: black;
	background: white;
	border: 1px solid black;
}

:global .something {
	font-weight: 800;
	color: aqua;
}

import React from 'react';
import styles from './CSSModule.module.css';

const CSSModule = () => {
	return (
		<div className={`${styles.wrapper} ${styles.inverted}`}>
			Hi <span className="something">CSS</span>
		</div>
	);
}

export default CSSModule;

4. Styled-Components

CSS-in-JS라고 불리는 자바스크립트 파일 안에서 스타일을 선언하는 방식입니다.

💡 다양한 라이브러리가 있으며, 대표적인 라이브러리로는 emotion이 있습니다.

import React from 'react';
import styled, { css } from 'styled-components';

const Box = styled.div`
	background: ${(props) => props.color || 'blue'};
	padding: 1rem;
	display: flex;
`;

const StyledComponent = () => {
	return <Box color="black">안녕하세요</Box>;
};

export default StyledComponent;

리액트를 다루는 기술(개정판)을 정독하면서 서술한 내용입니다.