React | CSS (Module CSS)

15412 단어 ReactReact

Keyword react css, module.css

CSS 작성법 3가지

  1. inline style
  2. css파일 생성
  3. module.css 파일 생성

1. Inline 스타일 작성 @ React

  • HTML태그에 바로 style 작성
  • 특별한 이유가 없다면, inline으로 작성하진 않음
  • 리액트에서 Style은 객체{} 로 작성
  • 객체이기 때문에 ,(쉼표)로 구분해줌
  • 스타일 속성명은 '-'를 안쓰고 Camel-case로 씀
  • 스타일 속성값이 문자열이면 ''로 감싸줘_야 함. (숫자px도 ' '로 감싸줘야 함)

import World from "./World";

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


2. .css 파일에 스타일 작성

  • index.css : 전체 프로젝트에 영향을 미치는 스타일링
  • App.css : App 컴포넌트에 한정된 내용의 스타일링

예제 두 개의 컴포넌트에 동일한 클래스명을 갖는 .box를 생성할 경우

App.js 에 box 클래스 생성

import "./App.css";
import Hello from "./Hello";

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

export default App;

App.css

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

hello.js 에도 동일하게 박스 만들어 주기

import "./Hello.css";

export default function Hello() {
  return (
    <>
      <h1
        style={{
          color: "#f00",
          borderRight: "12px solid #999",
          maginBottom: "50px",
          opaaciy: 0.5,
        }}
      >
        Hello
      </h1>
      <div className="box">Hello</div>
    </>
  );
}

Hello.css

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

결과

  • 문제: Hello 컴포넌트와 App컴포넌트의 box 모양이 똑같아짐.
  • 이유: className 클래스명이 같아서 오버랩됨
  • 결론: css파일들이 각 컴포넌트에 종속되는 것이 아니라, HTML<head></head>부분에 <style></style>로서 들어가 한번에 다같이 작성되서, 전페이지에 영향을 미치게 됨.

그렇다면, 각 컴포넌트에만 특화된 css는 어떻게 작성할까? css module


3. modue.css로 작성 (CSS Module)

각 컴포넌트에만 독점적으로 적용되는 css파일 작성

  • 파일이름: 컴포넌트명.modules.css
  • import styles from "./Hello.modules.css"
    => styles라는 객체가 생성됨
  • className={styles.클래스명}으로 적어줌

Hello.modules.css

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

Hello.js

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

export default function Hello() {
  return (
    <>
      <h1
        style={{
          color: "#f00",
          borderRight: "12px solid #999",
          maginBottom: "50px",
          opaaciy: 0.5,
        }}
      >
        Hello
      </h1>
      <div className={styles.box}>Hello</div>
    </>
  );
}

App.module.css

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

App.js

// import "./App.css";
import Hello from "./Hello";
import styles from "./App.module.css";

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

export default App;

결과

  • 똑같은 className 클래스명으로 작성해주었는데, 각 컴포넌트별로 각각 다른 스타일을 보여줌

  • css파일과 module.css파일의 결과는 다름.

  • 개발자도구에서 확인해보면 className 클래스명이 해당 컴포넌트에 특화된 이름으로 들어가 있는 것을 볼 수 있음.

    • class명: "컴포넌트명_클래스명__해쉬값"으로 들어가 있음.
    • 따라서, 동일한 클래스명을 사용하더라도 서로 중복될 걱정이 없음.

  • css크기가 커질수록 고민되는게, 클래스이름, 상속, 오버라이딩에 대한 부분인데, module.css방식으로 말끔하게 해결 가능함.

  • CSS부분이 global에서 관리되는 것이 아니라 컴포넌트 단위로 관리되는 것도 장점임.





<참고>
https://www.youtube.com/watch?v=-1auqB4hvus&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=5

API 반복 호출
2022-03-28(월)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage