코딩앙마 React공부 (CSS 작성법)

create-react-app으로 만든 프로젝트라면 별도의 패키지 설치없이 바로 사용할 수 있는 방법이 3가지가 있다.

 

1.  inline style 사용 (css파일을 따로 생성하지 않고  HTML태그에 바로 작성하는 방법)

주의할 점, 객체로 작성해야한다 / 카멜케이스로 작성해야한다.

일반적으로 마크업할때도 마찬가지겠지만, 특별한 이유가 없으면 inline으로 작성하지 X

 

2. 프로젝트 생성시 만들어지는 css파일들을 사용하는 방법

(index.css는 전체 프로젝트에 영향을 미치는 css이고, App.css는 App컴포넌트에 한정되어있는 내용들이 들어가있는것을 볼수 있다.)

한가지 문제점이 있다면, App.css는 App컴포넌트에만 적용되는것이 아니다.

 

예를 들어,

box라는 className을 생성하고

 

 

App.css에 css를 추가한다.

 

이번에는 Hello컴포넌트에도 동일한 작업을 해주겠습니다.

 

해놓고 결과를 보면?

전 페이지에 다 영향을 미친다는것을 알수있다.

 

3. 각 컴포넌트에 특화된 css를 작성하는 방법 (css module 사용)

이름.module.css 파일 생성

 

생성한 module.css를 import

 

 

App에 적은 것도 마찬가지로 변경

 

 

 

이렇게 컴포넌트 단위로 관리된다는 것이 장점이다.