Next.js14 학습코스 따라하기 (Chapter 2)

이상범·2024년 4월 12일

Next.js 가이드 Next.js 강의 Next.js 학습코스 React next.js 자바스크립트 프론트엔드

Next.js 14 학습코스 (Learn Next.js)

목록 보기

2/9

글로벌 스타일

/app/ui 폴더 내부를 보면, global.css파일이 존재한다. 이 파일을 사용하여 HTML 요소에 대한 사이트 전체 스타일과 관련된 CSS 규칙을 애플리케이션의 모든 경로에 적용할 수 있다.
/app/layout.tsx 경로에 아래와 같이 global.css를 import하여, 애플리케이션에 전역 스타일을 추가할수 있다.

import "@/app/ui/global.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

결과

tailwind

tailwind는 간단히 말해, Utility-First를 지향하는 CSS 프레임워크이다.
Utility-First란, 사전에 정의된 (유틸리티)클래스의 이름을 사용하여 CSS 속성을 적용함으로써, HTML 코드 내에서 바로바로 스타일링할 수 있도록 하는 것을 의미한다.
- 아래와 같이 클래스명을 입력하면, 텍스트가 text-blue-500 색상으로 출력된다.

<h1 className="text-blue-500">I'm Blue</h1>

/app/page.tsx 파일도 잘 확인해 보면, 이러한 tailwind css가 적용된 모습을 볼 수 있다.

import AcmeLogo from '@/app/ui/acme-logo';
import Link from 'next/link';

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
        {/* <AcmeLogo /> */}
      </div>
      <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
        <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
          <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
            <strong>Welcome to Acme.</strong> This is the example for the{' '}
            <a href="https://nextjs.org/learn/" className="text-blue-500">
              Next.js Learn Course
            </a>
            , brought to you by Vercel.
          </p>
          <Link
            href="/login"
            className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
          >
            <span>Log in</span>
          </Link>
        </div>
        <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
          {/* Add Hero Images Here */}
        </div>
      </div>
    </main>
  );
}

CSS Module

CSS Module은 CSS 파일을 불러와서 컴포넌트 내에 스타일을 적용할 때, 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술이다.
클래스 이름을 [파일명]_[클래스명]_[해시값] 형태로 만들기 때문에, CSS 클래스명이 서로 중첩되지 않는다.

사용 방법은 아래와 같다.
- 먼저 /app/ui 경로에 home.module.css파일을 아래와 같이 만든다.

.shape {
	height: 0;
	width: 0;
	border-bottom: 30px solid black;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
}

다음으로, 이것을 /app/page.tsx파일에서 import한 후, class를 아래와 같이 선언하면 CSS가 적용된다.

import styles from "./ui/home.module.css"; 
export default function Page() {
  return <div className={styles.shape}></div>;
}

clsx

React를 사용하면서 개발을 진행하다보면, 특정 상태(state)에 따라, className을 수정, 삭제, 추가하는 경우가 굉장히 많다.
이 때, 깔끔하게 className을 추가하거나 삭제하는 데 도움을 주는 라이브러리가 있는데, 이것이 지금 살펴볼 clsx이다.
만약, 아래와 같이 let status = "pending"이라는 변수와 값이 있다고 하자. 그리고, status 값에 따라, 적용하고자 하는 클래스명을 다르게 하고자 한다면, 아래처럼 clsx를 사용해볼 수 있다.
- status === "pending"이면, className="bg-gray-100 text-gray-500"
- status === "paid" 이면, className="bg-green-500 text-white"

  let status = "pending";

  const resultClassName = clsx({
	"bg-gray-100 text-gray-500": status === "pending",
	"bg-green-500 text-white": status === "paid",
  });

/app/page.tsx 에 아래와 같이 코드를 작성하면, status의 값에 따라 스타일이 달라지는 것을 확인할 수 있다.

import clsx from "clsx";

export default function Page() {
  let status = "pending";
  const resultClassName = clsx({
    "bg-gray-100 text-gray-500": status === "pending",
    "bg-green-500 text-white": status === "paid",
  });
  
  return (
    <div
      className={`inline-flex items-center rounded-full m-8 px-2 py-1 text-xl ${resultClassName}`}
    >
      clsx 사용해보기
    </div>
  );
}