컴포넌트 스타일링

일반 CSS

일반적으로 사용하는 css 방식이다.

 

Sass

CSS 전처리기 중 하나로 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 해준다. scss, sass 확장자를 지원한다.

.sass

	$font-stack: Helvetica, sans-serif
	$primary-color: #333
	body
	font: 100% $font-stack
	color: $primary-color

view raw ex.sass hosted with ❤ by GitHub

.scss

	$font-stack: Helvetica, sans-serif;
	$primary-color: #333;
	body {
	font: 100% $font-stack;
	color: $primary-color;
	}

view raw ex.scss hosted with ❤ by GitHub

CSS Module

CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션이다.

 

styled-components

스타일을 자바스크립트 파일에 내장하는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있다.