• 목차

개요

• 보통 컴포넌트 별로 다른 css 를 가지게 된다.
• 특정 css 에 정의된 스타일은 그 스타일이 속한 컴포넌트에만 적용되는 것이 좋다.
• 리액트에서는 특정 컴포넌트에 css 파일을 매핑할 수 있는 CSS 모듈 기능을 제공한다.
  • css 파일 이름을 Xxx.module.css 로 이름을 지정해야 한다.

MainNavigation.js

import {Link} from "react-router-dom";

import classes from './MainNavigation.module.css';

function MainNavigation() {
    return (
      <header className={classes.header}>
          <div className={classes.logo}>React Meetups</div>
          <nav>
              <ul>
                  <li>
                      <Link to={'/'}>All Meetups</Link>
                  </li>
                  <li>
                      <Link to={'/new-meetup'}>Add New Meetup</Link>
                  </li>
                  <li>
                      <Link to={'/favorites'}>My Favorites</Link>
                  </li>
              </ul>
          </nav>
      </header>
    );
}

export default MainNavigation;

MainNavigation.module.css

.header {
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #77002e;
    padding: 0 10%;
}

.logo {
    font-size: 2rem;
    color: white;
    font-weight: bold;
}

...

• css 파일을 import 하면, 내부적으로 빌드 프로세스가 알아서 이 css 코드를 로딩되는 페이지에 추가해준다.
• import classes from './MainNavigation.module.css'
  • classes 처럼 css 파일에서 정의한 모든 css 클래스들을 담을 객체를 정의해주어야 한다.
  • 임의의 객체를 정의하여 사용함으로써 다른 컴포넌트에 같은 이름의 css Class 가 있더라도 문제가 생기지 않는다. (고유)