react module.css

컴포넌트 스타일을 적용시키는 방법 중 

제일 기본적인 방법

 

Nav.js 컴포넌트가 있다면 

Nav.module.css 파일을 만들어서 import해준다. 

import Link from "next/link"
import styles from './Navbar.module.css';
import { useRouter } from "next/router"

export default function NavBar() {
  const router = useRouter();

  return(
    <div className={styles.nav}>
      <Link href="/" className={router.pathname === '/' ? styles.active : ''}>home</Link>
      <Link href="/about" className={router.pathname === '/about' ? styles.active : ''}>about</Link>
    </div>
  )
}

 

className에 적용하는 방법 

<div className={styles.nav}></div>

 

다중 클래스 적용하는 방법 

1. 백틱 이용하기 

<Link href="/" className={`${styles.link} ${router.pathname === '/' ? styles.active : ''}`}>home</Link>

 

2. join을 이용하기

className={[styles.link, router.pathname === '/about' ? styles.active : ''].join(' ')}

 

module.css 선호하지 않는이유 

1. 스타일 파일이 필요하다. 
2. 클래스 name을 기억해야한다.