[NextJS] CSS Module, Styles JSX

CSS Modules

1. globals.css
   모든 페이지에 공통으로 적용

2. 특정 페이지에만 import 하여 class를 주고 싶다면 이름.module.clss 파일 생성

• components/NavBar.module.css

.link {
  text-decoration: none;
}

.active {
  color: tomato;
}

• 사용할 때는 className에 {import 한 이름. 클래스명}으로 작성하면된다.

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

export default function NavBar() {
  const router = useRouter();
  return (
    <nav>
      <Link href="/">
        <a
          className={`${styles.link} ${
            router.pathname === "/" ? styles.active : ""
          }`}
        >
          Home
        </a>
      </Link>
      <Link href="/about">
        <a
          className={[
            styles.link,
            router.pathname === "/about" ? styles.active : "",
          ].join(" ")}
        >
          About
        </a>
      </Link>

• className에 문자열로 넣지않고 자바스크립트 property로 넣는다.

• 실제로는 클래스 이름 뒤에 무작위 문자열이 들어간다. 즉 충돌이 일어나지않을 것이고 다른 컴포넌트에서도 nav라는 클래스 이름을 사용할수있는 장점이 있다.

• 하지만 클래스 이름 생각하는 것도 귀찮고, 2개 이상을 설정하려면
  꽤 귀찮아진다.

• 강의자분은 별로 선호하는 방법이 아니라고 하셔서 나도 굳이 코드를 수정하진않았지만 여기서도 마찬가지로 Link안에 a를 넣으면 안될것이다.

Styles JSX

이 방법은 해당 styles 태그가 있는 컴포넌트 내에서만 적용된다.
즉 NavBar에 active란 클래스를 만들어서 CSS 코드를 작성하더라도
다른 컴포넌트에있는 element에 active라는 클래스를 만들어도 적용되지않는다. 같은 이름을 사용해도 충돌하지않는다.

• components/NavBar.js

import Link from "next/link";
import { useRouter } from "next/router";


export default function NavBar() {
  const router = useRouter();
  console.log(router.pathname)
  return (
    <nav>
      <Link href={"/"}>
        <div className={router.pathname === "/" ? "active" : ""}>
          Home
        </div>
      </Link>
      <Link href={"/about"} >
        <div className={router.pathname === "/about" ? "active" : ""}>
          About
        </div>
      </Link>
      <style jsx>{`
        nav {
          background-color: tomato;
        }
        a {
          text-decoration: none;
        }
        .active {
          color: yellow;
        }
      `}</style>
    </nav>
  );
}

active가 적용이 안되네. 기존에는 a태그에 className을 지정해야했고 지금은 Link에 직접 넣으면 되는걸로 버전13부터 변경됐다는데....

왜 노랑 안먹냐고~~~ ->

• App Router를 사용하는 경우: modern /app 디렉토리,usePathname() hook, Tailwind CSS, TypeScript를 쓴다.
• Pages Router를 사용하는 경우: 기존의 /pages 디렉토리, useRouter() hook, 순수 CSS, JavaScript를 쓴다.

힘드네.. 나는 자동생성된 app directory가 있고..Tailwind를 쓰고 JavaScript를 쓰는데..뭘까

근데 콘솔로그에 찍어보니까 router.pathname에도 이미 잘 들어가고 있다.

결국 Link안에 div 넣었다.. 그러니까 잘 동작한다.