[React JS] #4 CSS 작성법

* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link)

1. 인라인 스타일 사용하기

태그에 스타일 옵션을 이용하여 스타일을 적용하는 방법이다. 단, 스타일 옵션의 값은 객체가 들어가야 하므로, 중괄호가 2중으로 작성되어야 한다. (코딩앙마님 강의와는 다르게 보기 편하도록 컴포넌트를 임의로 하나 추가했다.)

 

📁 CssStyleTest.js

export default function CssStyleTest() {
    return <div>
        <h1>StyleTest</h1>
        <h3 style={{color: "red"}}>inline style</h3>
    </div>;
}

 

여기서 주의할 점이 몇 가지 있다.

• 스타일의 옵션 이름을 background-color와 같이 dash(-)를 사용하지 말고, backgroundColor와 같이 Camel 케이스로 작성해줘야 한다.
• value 부분에 들어가는 값 중 숫자는 그냥 입력해도 되지만, px이나 문자열은 따옴표로 감싸줘야한다.

2. css파일 사용하기

src 디렉터리에 가보면 index.css와 App.css파일이 있다. index.css는 전체 프로젝트에 영향을 미치는 스타일 시트이고, App.css에는 App 컴포넌트에만 한정된 내용이 들어가 있다.

그런데, 여기서 함정이 하나 있다. 💥App.css는 App 컴포넌트에만 적용되는 것이 아니다!!!💥

📁 Hello.js에 추가

<div className="box">.css style</div>

 

📁 App.css 하단에 추가

.box {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

미리보기

이번엔 Hello.css를 새로 만들어서 테스트해보자

📁 Hello.css

.box {
    width: 200px;
    height: 50px;
    background-color: greenyellow;
}

 

📁 Hello.js 상단에 import문 추가 : import './Hello.css';

미리보기

오! 바뀌었다!

이번엔  App.js에도 box 클래스를 갖는 태그를 중복으로 추가해보자

코드는 계속 반복되니 생략하겠음. 그리고 태그 내부에 텍스트를 구분이 가도록 수정해보았다. 그랬더니 결과는..

동일한 css가 적용되었다

 

개발자 도구로 확인을 해보면, 같은 클래스 명을 가져서 오버라이딩되는 것을 확인할 수 있다.

Hello.css의 스타일만 적용됨.

 

결론적으로, css파일은 각 컴포넌트에 종속되는 것이 아니라 Head 태그 내부에 각 파일이 작성돼서 전 페이지에 작용을 한다.

윗 <style>태그가 App.css, 아래가 Hello.css

 

---

3. CSS 모듈을 활용한 방법

이 방법은 각 컴포넌트에 특화된 CSS를 작성하기 위한 방법이다.

Hello.css의 파일 명을 Hello.module.css로 변경한다. module.css를 작성할 때 앞 부분에는 주로 적용될 컴포넌트가 적힌다.

그리고 Hello.js에 아래와 같이 import문을 작성한다.

import styles from './Hello.module.css';

이렇게 작성하면 styles라는 객체가 생성된 것이다. 따라서 하단부에 클래스 명을 기입할때 아래와 같이 기입한다.

<div className={styles.box}>.css in Hello Comp</div>

드디어 생각했던 대로 바뀌었다!

App.module.css를 새로 추가해보자

기존에 App.css에 추가했던 .box 스타일 내용을 고대로 잘라서 붙여넣고, App.js를 방금과 동일하게 import 후 객체를 이용하도록 수정한다.

import './App.css';
import Hello from './component/Hello';
import Welcome from './component/Welcome';
import styles from './App.module.css';

function App() {
    return <div className="App">
        <Hello />
        <div className={styles.box}>.css in App Comp</div>
    </div>;
}

export default App;

 

요소 까보기

해당 컴포넌트에 특화된 네이밍으로 클래스 명이 기입되어있다. 그리고 뒤엔 심지어 해쉬값까지 적혀있어서 중복될 일이 없다.

컴포넌트 단위로 관리할 수 있어서 오버라이딩과 같은 문제를 피할 수 있다.

 

* 근데 코딩앙마님이 진행하는 이번 플젝에서는 따로 css를 모듈로 작성하지 않고, index.css에서 통짜로 작업하신다고 한다. css의 양이 많지도 않고, 한 파일에 몰아서 작성하기 위해서.