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

  1. 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식

  2. Sass : 자주 사용하는 CSS 전처리기 중 하나로, 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성하도록 해줌

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

  4. styled-components : 스타일은 자바스크립트 파일에 내장시키는 방식으로, 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해줌

실습을 진행하기 위해 새로운 프로젝트를 생성한다.

$ npx create-react-app react-tech-styling

// github 연동
$ rm -rf .git
$ git init
$ 이후 동일

Untitled

9-1. 가장 흔한 방식, 일반 CSS

프로젝트는 일반 CSS 방식으로 만들어져 있다.