Styling in React: React app을 스타일링하는 다양한 방법들

유연하고 재사용 가능한 UI 컴포넌트를 만들 수 있는 React를 스타일링하는 방법에는 여러 가지가 있다. 다양한 방법의 특징을 알아보면서 무엇을 선택할지에 대한 고민을 줄여보고자 포스팅을 해 본다. 

 

1. import CSS file 

가장 기본이 되는 방법으로는 Component로 CSS 파일을 바로 import 하는 방식이 있다. 간단하긴 하지만 단점이 존재한다. 어플리케이션의 규모가 클수록 컴포넌트가 많아지게 되는데, 그러면 css 파일을 관리하기 어려워지고 여러 컴포넌트에서 사용한 class name의 중복이 발생할 수 있다. 

 

2. Styled Components

* CSS-in-JS library (컴포넌트 파일 내에서 스타일을 지정하여 컴포넌트와 스타일을 한 파일 내에서 관리할 수 있게 됨)

* don't have to worry about class name collision

* styled.TagName의 형태로 새로운 객체를 만들고 내부에 원하는 스타일을 지정한다. 컴포넌트는 이 객체를 태그 이름으로 사용하면 된다.

* JS 파일 내에 위치하기 때문에 props도 전달이 가능하여 조건부 서식 지정도 가능해진다.

 

3. CSS Module

* CRA를 이용해서 만든 React project에는 CSS Module 기능을 제공함

* CSS 파일의 확장자를 .module.css로 작성

* CSS Module이 class name이 중복되지 않도록 고유한 이름을 지어준다.

* CSS 파일은 JS 파일과 분리되어 있다. 

 

 

Reference

Styling in React (CSS-in-JS)

2장. 리액트 컴포넌트 스타일링하기 · GitBook