[NextJs] Nextjs에서 CSS 사용하기 (CSS Modules/Styles JSX)

Next.js 에서는 특별한 방법으로 css 를 사용할 수 있다.

바로 Module.

 

🍎 CSS Module 파일 만들기

원하는 위치로 가서 모듈을 만들자.

이름.module.css

 

아주 간단하다

그리고 이 모듈을 사용할 곳으로 가자.

 

🍎 CSS Module 연결하기

사용해줄 파일에 module css 파일을 import 해온다.

그리고 쓴다!

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

// css 모듈 사용하기
import styles from "./NavBar.module.css";

export default function NavBar() {

  return (
    // 이렇게 중괄호 안에 자바스크립트 객체의 포로퍼티 형식으로 작성한다.
    <nav className={styles.nav}>
      <Link href="/">
        <a>home</a>
      </Link>
      <Link href="/farm">
        <a>MY FARM</a>
      </Link>
    </nav>
  );
}

 

실행하게 된다면 클래스이름은 어떤 무작위 텍스트로 나타나게 될것이다.

내가 작성한적 없는 클래스명..

 

이러한 형태의 클래스는 결국 어떠한 충돌도 만들지 않는 무작위 이름을 가진 클래스가 된다.

다른 컴포넌트에서도 이 nav 라는 클래스 이름을 사용할 수 있게 한다는 것이다.

= 클래그 이름 충돌을 겪지 않아도 된다! 👍🏻

페이지가 빌드될 때 Next.js 가 클래스 이름을 무작위로 바꿔줄 것이다.

 

이전에 포스팅에서 useRouter 를 활용해 NavBar 에 현재 위치를 나타내는 CSS 를 했었다.

이번엔 CSS Module 을 활용해서 작성해보자.

 

// NavBar.js

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

// css 모듈 사용하기
import styles from "./NavBar.module.css";

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

  console.log(router); // 이렇게 콘솔에 찍으면

  return (
    <nav className={styles.nav}>
      <Link href="/">
        <a className={router.pathname === "/" ? styles.active : ""}>HOME</a>
      </Link>
      <Link href="/farm">
        <a className={router.pathname === "/farm" ? styles.active : ""}>
          MY FARM
        </a>
      </Link>
    </nav>
  );
}

// NavBar.moule.css

.nav {
  display: flex;
  justify-content: space-between;
  background-color: #6741d9;
  color: #fff;
  padding: 18px 20px;
  font-weight: bold;
}

.active {
  color: #ff8787;
}

 

결과는 

훌륭한 Navigation 이다

 

🍎 두개 이상의 module.css 를 갖게하기

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

// css 모듈 사용하기
import styles from "./NavBar.module.css";

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

  console.log(router); // 이렇게 콘솔에 찍으면

  return (
    <nav className={styles.nav}>
      <Link href="/">
        // 백틱을 활용해 한칸 띄고 클래스 넣기
        <a
          className={`${styles.under} ${router.pathname === "/" ? styles.active : ""}`}
        >
          HOME
        </a>
      </Link>
      <Link href="/farm">
        // 배열을 한칸 공백을 두고 join 하기
        <a
          className={[
            styles.under,
            router.pathname === "/farm" ? styles.active : "",
          ].join(" ")}
        >
          MY FARM
        </a>
      </Link>
    </nav>
  );
}

 

하지만 module 을 사용하게 된다면 파일을 바꿔야하기도 하고, 

클래스 사용이 생각보다 번거롭다.

그리고 클래스 이름을 매번 기억해서 불러오는 작업도 일이다!

 

🍏 Styles JSX 사용하기

이제 module 을 사용한다는게 상당히 번거로운 일이라는 것을 알게되었다.

또 다른 방법을 사용해보자.

 

이렇게 <style jsx> 태그를 선언하고 배틱 문자 안에 스타일을 작성해주면 된다.

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

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

  return (
    <nav>
      <Link href="/">
        <a className={router.pathname === "/" ? "active" : ""}>HOME</a>
      </Link>
      <Link href="/farm">
        <a className={router.pathname === "/farm" ? "active" : ""}>MY FARM</a>
      </Link>

      // style 태그를 열어 안에 jsx를 선언해주자
      <style jsx>
        {`
            nav {
              display: flex;
              justify-content: space-between;
              background-color: #588068;
              color: #fff;
              padding: 18px 20px;
              font-weight: bold;
            }

            a {
              text-decoration: underline;
            }

            .active {
              color: #e5b0a4;
            }

          }
        `}
      </style>
    </nav>
  );
}

 

css module 과 마찬가지로 클래스명이 바뀐걸 확인할 수 있다.

 

클래스 명이 이상하게 바뀐다

 

다른 컴포넌트 내에서 JSX를 사용해 스타일을 한다면,

클래스 이름이 겹쳐도 전혀 상관없다.

내부에서 작성한 스타일들은 오직 그 컴포넌트 내부로만 범위가 한정되기 때문이다!

여러모로 module 보다 좋다고 느껴진다...

 

 

그리고 JSX 는 문자열 삽입이기 때문에 props 를 사용할 수 있다.

<style jsx>
  {`
    nav {
      display: flex;
      justify-content: space-between;
      background-color: #588068;
      color: #fff;
      padding: 18px 20px;
      font-weight: bold;
    }
 
   a {
     text-decoration: underline;
    }

    .active {
      color: ${props.color}
    }
  `}
</style>

 

 

 

예제 코드는 여길 참고하자.

https://github.com/mirro97/nextjs-example

GitHub - mirro97/nextjs-example: Next.js 공부하며 작성한 예제