Next.js 13 - CSS 모듈

Next.js에서 css modules 방법으로 스타일을 적용하는 방법을 알아보겠습니다.

✏️ 파일이름 설정

모듈로 CSS를 설정하기 위해서는 파일명을 <파일명>.module.css 패턴으로 생성해주어야 합니다.

✏️ import & 스타일 적용

NavBar.module.css 파일 안에 nav라는 클래스명의 스타일이 있다고 가정했을때, 스타일을 적용해 줄 파일 안에서 import 해줍니다.

스타일을 적용해 줄때는 클래스명을 일반 텍스트 형식으로 설정해주지 않고 객체에서의 프로퍼티 형식으로 적어줍니다.

.nav {
  display: flex;
  justify-content: space-between;
  background-color: tomato;
}

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

export default function NavBar() {
  const pathname = usePathname();

  return (
    <nav className={styles.nav}> //🔥 스타일 적용 방식 🔥
      <Link href="/" style={{ color: pathname === "/" ? "red" : "blue" }}>
        home
      </Link>
      <Link
        href="/about"
        style={{ color: pathname === "/about" ? "red" : "blue" }}
      >
        about
      </Link>
    </nav>
  );
}

✏️ 2개 이상 클래스명 지정

조건문의 클래스명과 상시 적용하고 싶은 스타일 클래스명 두 가지 이상을 적용해 주고싶을 때에는 아래와 같이 적용해 줄 수 있습니다.

백틱(``) 안에 ${ } 기호로 감싸주어 여러가지 클래스명을 추가해 줄 수 있습니다.

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

또는 클래스명을 배열로 삽입해 주는 방법도 있습니다. 배열로 삽입할때에는 .join() 메서드를 활용해 공백을 간격으로 한개의 문자열로 합쳐주어야 합니다.

<Link
    href="/about"
    className={[
      pathname === "/about" ? styles.active : "",
      styles.link,
    ].join(" ")}
  >
    about
</Link>

✏️ 장점

위의 방식을 사용했을때 장점으로는 브라우저에서 html 요소를 확인했을 때 클래스명이 지정해준 nav로 들어가 있지 않고 무작위 텍스트가 들어가 있는걸 확인할 수 있습니다.

이러한 특징은 다른 컴포넌트에서 동일한 nav클래스명을 사용했을 때에도 클래스명의 어떠한 충돌도 발생시키지 않는다는 장점이 있습니다.

✏️ 단점

css 모듈의 단점으로는 두 개의 파일을 관리해주어야 한다는 점이 있습니다.
두 개의 파일을 분리해서 관리하게 되면 클래스명을 기억해서 작성해야 하고, 오타가 날 수 있어 주의해 주어야 합니다.
또한, 클래스명을 작성하는 방법이 조금 복잡하다는 점이 있습니다.