지난 포스팅에서 기본적인 리액트 사용법에서 정리했습니다. 이번에는 리액트에서 CSS를 적용해 보겠습니다.
인라인 스타일
태그 안에 중괄호 {} 안에 객체로 key와 value 값으로 사용해야합니다. 기존 CSS와 다른 것은 '-'를 사용하지 않고 camelcase로 작성하면 됩니다.
CSS 파일 적용
CRA를 설치하고나면 src 폴더 안에 index.css와 App.css 파일을 확인할 수 있습니다. css파일을 import하면 사용가능 합니다.
import './App.css';index.css
index.css 파일은 전체 프로젝트에 영향을 주는 파일입니다.
App.css
App.css는 App 컴포넌트에 적용할 내용이 추가 되어 있습니다.
App.js 내부에 작성했던 Hello 컴포넌트를 Hello.js 파일로 새로 작성합니다.
App.js에 Hello 컴포넌트를 불러온 후 div 요소의 자식 요소로 배치합니다.
App.css 파일에 div 요소에 스타일링을 적용해 줍니다.
렌더링된 경과를 보면 CSS가 잘 적용이 됩니다. 그러나 App.css에 작성한 내용이 App 컴포넌트 뿐만 아니라 App 컴포넌트의 하위에 있는 Hello 컴포넌트까지 적용이 된다는 문제접이 있습니다. 이런 현상이 발생하는 이유는 개발자 도구를 확인해보시면 알 수 있습니다. App.css 적용된 내용이 HTML head 부분에 포함되어 있기 때문입니다. 그렇다면 어떻게 해야 컴포넌트 별로 원하는 스타일을 적용시킬 수 있을까요?
module.css
컴포넌트 별로 css를 적용하기 위해서는 모듈을 생성해서 내용을 작성하면 됩니다.
App.module.css와 Hello.module.css을 먼저 생성해 주고 각각 다른 스타일을 적용해 줍니다.
컴포넌트를 생성한 파일에서 module.css 파일을 불러옵니다.
import styles from './Hello.module.css'
import styles from './App.module.css'CSS를 적용하고자 하는 요소의 클래스 이름을 styles.content로 명시하면 import된 module.css를 적용시킬 수 있습니다.
컴포넌트 별로 스타일이 다르게 적용된 것을 확인할 수 있습니다.
