[React] 리액트를 다루는 기술 09-1. CSS

09-1.CSS

 

CSS는 가장 기본적인 컴포넌트 스타일링 방식이다.

CSS를 작성할때 가장 중요한것은 CSS 클래스를 중복되지 않게 하는것이다

 

CSS 클래스가 중복되는 것을 방지하는 여러가지 방안

(1) 이름을 지을때 규칙을 사용

(2) CSS Selector 활용

 

01. 이름을 짓는 규칙

: 클래스 이름에 컴포넌트 이름을 포함시키기

 

* BEM 네이밍? 

해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성

EX) .card_title-primary

 

02. CSS Selector

CSS 클래스가 특정 클래스 내부에 있는 경우만 스타일을 적용할 수 있다.

 

(ex) .App 안에 들어있는 .logo 에 스타일을 적용하고 싶다면

// css 파일

.App.logo {
	animation: App-logo-spin infinite 20s linear;
    height: 40vmin;
}

 

// App.js

<div className="App">
...
	<img src={logo} className="logo" alt="logo" />
...
</div>

 

(ex) App.js 에 있는 태그 자체에 스타일을 적용하고싶다면

// css 파일

.App header {
    background-color: #282c34;
    min-height: 100vh;
    display: flex;
    color: white;
}

 

// App.js

<div className="App">
    <header>
    ...
    </header>
</div>

 

이런식으로 컴포넌트의 최상위 html 요소에는 컴포넌트의 이름으로 클래스 이름을 짓고 (.App),

그 내부에서는 소문자를 입력하거나 (.logo), header 같은 태그를 사용하여 클래스 이름이 불필요한 경우에는 아예 생략할 수도 있다.