리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있다. 회사 요구 스펙, 개발자 취향 등에 따라 달라지는 부분이라 딱히 정해진 방식은 없다. 그냥 어떠한 방식이 있고 또 자주 사용되는 방식으로 무엇이 있는지 살펴보도록 하자!
일반 CSS
: 컴포넌트를 스타일링하는 가장 기본적인 방식.
Sass
: 자주 사용되는 CSS 전처리기(pre-processor) 중 하나로 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 해 줌.
CSS Module
: 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션.
styled-components
: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해 줌.