[React] CSS 적용방법 (inline, CSS 파일, 모듈형 CSS 파일) 3가지

 

CSS를 적용하는 방법 3가지

1. 인라인 (inline) styling 적용
2. Css styling 작성 후 Component에서 css파일 import
3. css-module 사용

 

1. 인라인 styling (1)

return문 안에서 인라인 스타일을 지정하여 css를 적용시켜준 예이다.

결과

 

인라인 styling (2)

결과

2. CSS 활용

' ' 홀 따옴표 대신해서 " " 쌍 따옴표를 사용해도 정상적으로 작동된다.

결과

---

인라인 Styling의 장점

• CSS파일을 작성할 필요가 없다.
• 자바 스크립트 로직을 css파일에 먹일 수 있다.

단점

• 인라인 스타일로 작성하다 보니 태그에 스타일이 남으며 가독성이 떨어지고, 유동적인 조작이 힘들다.

 

CSS파일의 장점

• CSS의 개발 형식을 그대로 사용이 가능하다.

단점

• 파일 재사용 시 js와 css 파일을 함께 묶어서 사용해야 한다.
• Css파일에서 작성했던 디자인이 다른 컴포넌트에 영향을 미친다.

인라인 Styling과 CSS의 단점들을 보완하여 만들어진게 모듈형 CSS 방식이다.

 

3. 모듈형 CSS

컴포넌트의 최상단 CSS 클래스는 컴포넌트의 이름과 일치시킨다. 컴포넌트 내부에서 보여지는 CSS 클래스는 CSS Selector를 활용한다.

 

클래스 이름에 대해 고유한 이름들이 만들어지기 때문에, 실수로 CSS 클래스 이름이 다른 관계 없는 곳에서 사용한 CSS 클래스 이름과 중복되는 일에 대해 걱정할 필요가 없다.