3-1. CSS in React

Reactjs에서 CSS를 활용하는 3가지 방법 - 1. css 파일 import 하기

.css 작성법은 react 라고 해서 특별할 것이 없다.

${적용할 범위} {
    css 속성: 값 
}

 

작성한 css 파일을 App.js에서 import 해준다.

import '../style.css' // 각자 경로에 맞춰

class App extends Component {
	...
}

export default App

 

 

css 파일 작성법은 동일하지만

react 에서 class 를 사용하고 싶으면 className이라 써야한다.

css파일을 사용할 경우 단점은 컴포넌트와 css가 분리되어 있다는 것.

React 의 장점인 컴포넌트의 캡슐화, 모듈화에 반한다.

전체 어플리케이션에서 하나의 컴포넌트를 가져오면 그 안에 javascript, actions, html, css 가 모두 들어있길 바란다.

 

해결 방법은?

컴포넌트마다 css파일을 만들어서 컴포넌트에 직접 import 해주는 방법

그러나 이 방법도 매번 파일을 만들어야 하고 + 매번 import 해야하고

className 값도 계속해서 기억해줘야한다!

특히, css는 프로젝트 내 global하게 작용하기 때문에 모든 컴포넌트에서 같은 className을 사용하지 않도록 주의해야하기때문에 매우 복잡하다.