css 작성법

리액트 프로젝트에서 css를 작성하는 방법을 알아보자

인라인 작성법

태그안에 바로 스타일을 작성하는 방법이다.
다만 리액트에서는 html과는 달리 스타일을 객체처럼 작성해야한다.

<p style = 
   {
        {
           color : "red",
           marginBottom: "50px"
            
         }
    }> hello </p>

{}안에 스타일을 나열하여 작성하고, ;대신 ,를 사용해 스타일을 구분한다.

가장 기본적인 방법이나 실무에서는 잘 사용하지 않는다.

---

리액트 프로젝트를 생성하면 프로젝트 전체 스타일에 영향을 미치는index.css와 App컴포넌트의 스타일에만 영향을 미치는App.css 두가지의 css파일이 생성되어있다.

App.css는 App컴포넌트의 스타일에만 영향을 미치지만 사실 그렇지 않다.

스타일은 오버라이딩이 되기때문이다.

App.js
function App() {  
  return(
    <div className="App">
      <Hello/>
      <div className="box">App
      </div>
    </div>
  )
}

/* App.css */
.box{
    width: 100px;
    height: 50px;
    background-color: red;
  }

Hello 컴포넌트와 위와 같은 빨간 박스 스타일을 가진box 클래스가 있다.

/*Hello.css*/
.box {
    width: 200px;
    height: 50px;
    background-color: blue;
}

하지만 Hello 컴포넌트도 동명의 box 클래스가 있다면 어떨까?

두 box 컴포넌트는 다른 스타일을 가지고 있으므로 각자 맞는 스타일을 나타낼 것 같지만 스타일 오버라이딩에 의해 두 클래스는 임포트된 순서에 따라 나중에 정의된 스타일을 따를 것이다.
즉, 같은 스타일이 적용된다

---

module

각각의 컴포넌트가 동명의 클래스를 가지고 있더라도 서로다른 스타일을 가지게 하기 위해서는 module을 사용해야한다.

방법은 간단하다.
기존의 App.css 를 App.module.css로 변경해주면 된다.

App.module.css를 js파일에 임포트해보자.
기존엔 import './App.css'; 와 같이 임포트를 했다면 import styles from './App.module.css';와 같이 객체를 만들어 임포트해주자.

style과 같은 객체를 만들면 module.css파일안에서 원하는 클래스 스타일을 오브젝트처럼 사용할 수 있다.

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

function App() {  
  return(
    <div className="App">
      <Hello/>
      <Welcome/>
    // box스타일 사용
      <div className={styles.box}>App
      </div>
    </div>
  )
}