[CSS] React CSS Module

CSS Module?

• 클래스 이름을 고유한 값으로 자동으로 생성해주어 이름 중복됨을 방지해주는 스타일링 방법
• 클래스명 동일해서 충돌하는 현상 방지 가능하며, 리액트 내에서 컴포넌트 단위로 스타일 적용
• 보통 파일명은 컴포넌트명.module.css로 해주며 import styles로 임포트

import styles from '../modules/Navbar.module.css';

• 스타일 지정 원하는 요소에 className={styles.title}과 같은 형태로 지정해주면 됨

function Navbar() {

    return (
        <nav>
                <div className={styles.title}>YOUTUBE</div>
        </nav>
    );
}