React - module css

inline style 사용

• css 파일 별도 작성 X
• HTML tag 바로 작성
• 특별한 이유 없이 inline 으로 작성하지 않음
• 객체로 작성해야 함
• key 에는 속성 / value 는 속성값 작성
• 객체이므로 쉼표로 구분
• 대쉬 쓰지 말고 CamelCase 로 작성

import World from "./World";

export default function Hello(){
    return (
    <div>
        <h1
        style={{
            color: "#f00",
            borderRight: "12px solid #000",
            marginBottom: "50px",
            opacity: 0.5,
        }}
        >
            Hello
        </h1>
        <World />
        <World />
    </div>
    );
}  

CSS 파일 활용

React Project Github

• index.css: 전체 프로젝트에 영향을 미치는 스타일링
• App.css: Component 의 스타일링 (Component 에만 적용되는 것이 아님)

  그럼 어떻게 해야하는가?
  각 component 의 특화된 css 작성하기
  → CSS 모듈 활용

CSS 모듈 활용

• Hello.module.css

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

• Hello.js
  • 추가할 부분 -> import & className

import World from "./World";
import styles from "./Hello.module.css"; // add

export default function Hello(){
    return (
    <div>
        <h1
        style={{
            color: "#f00",
            borderRight: "12px solid #000",
            marginBottom: "50px",
            opacity: 0.5,
        }}
        >
            Hello
        </h1>
        <div className={styles.box}>Hello</div>  // {styles.box} 로 수정
    </div>
    );
}