리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있습니다
정해진 방식이라고 할만한 것이 없고,
회사마다 요구하는 스펙이 다르고, 개발자마다 취향에 따라 선택하기 때문입니다.
이 장에서는 어떠한 방식이 있는지 알아보고, 자주 사용하는 방식을 몇 가지 사용해 보겠습니다.
이 장에서 알아볼 스타일링 방식은 다음과 같습니다.
-
일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식입니다.
-
Sass : 자주 사용되는 CSS 전처리기(pre-processor)중 하나로 확장된 CSS문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해줍니다.
-
CSS module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션입니다.
-
styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해줍니다.
먼저 프로젝트를 생성하여 실습을 준비하여 주세요.
npx create-react-app 08_component-styling
1234