Post

Next.js Learn - 2. CSS Styling 번역

Posted Updated
Preview Image
By Kidongg 9 min read

본 포스팅은 Next.js Learn의 CSS Styling 내용을 번역한 것입니다.

현재 홈 페이지에는 스타일이 없습니다. Next.js 애플리케이션의 스타일을 지정할 수 있는 다양한 방법을 살펴보겠습니다.

In this chapter…

앞으로 다룰 주제는 다음과 같습니다.

  • 애플리케이션에 글로벌 CSS 파일을 추가하는 방법
  • 두 가지 스타일링 방법: Tailwind 및 CSS Modules
  • clsx 유틸리티 패키지로 클래스 이름을 조건부로 추가하는 방법

Global styles

app/ui 폴더를 살펴보면 global.css라는 파일을 볼 수 있습니다. 이 파일을 사용하여 애플리케이션의 모든 경로에 CSS 재설정 규칙, 링크와 같은 HTML 요소에 대한 사이트 전체 스타일 등과 같은 CSS 규칙을 추가할 수 있습니다.
global.css는 애플리케이션의 모든 컴포넌트에서 가져올 수 있지만 일반적으로 최상위 컴포넌트에 추가하는 것이 좋습니다. Next.js에서는 이것이 root layout입니다(나중에 자세히 설명).
app/layout.tsx로 이동하여 global.css 파일을 가져와서 애플리케이션에 전역 스타일을 추가하세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// /app/layout.tsx

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

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

개발 서버가 실행 중인 상태에서 변경 사항을 저장하고 브라우저에서 미리 봅니다. 이제 홈페이지는 다음과 같이 표시됩니다. img-description 출처 : Next.js Learn CSS 규칙을 추가하지 않았는데 스타일은 어디에서 가져온 걸까요?
global.css 내부를 살펴보면 @tailwind 지시문이 있습니다.

1
2
3
4
5

/* /app/ui/global.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind

Tailwind는 TSX 마크업에서 직접 utility classes를 빠르게 작성할 수 있도록 하여 개발 프로세스의 속도를 높여주는 CSS 프레임워크입니다.
Tailwind는 클래스 이름을 추가하여 요소의 스타일을 지정합니다. 예를 들어 "text-blue-500" 클래스를 추가하면 <h1> 텍스트가 파란색으로 바뀝니다.

1

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

CSS 스타일은 전역으로 공유되지만 각 클래스는 각 요소에 개별적으로 적용됩니다. 즉, 요소를 추가하거나 삭제할 때 별도의 스타일시트를 유지하거나 스타일 충돌이 발생하거나 애플리케이션 확장에 따라 CSS 번들의 크기가 커지는 것에 대해 걱정할 필요가 없습니다.
create-next-app을 사용하여 새 프로젝트를 시작하면 Next.js에서 Tailwind를 사용할 것인지 묻습니다. yes를 선택하면 Next.js가 필요한 패키지를 자동으로 설치하고 애플리케이션에 Tailwind를 구성합니다. app/page.tsx를 보면 예제에서 Tailwind 클래스를 사용하고 있음을 알 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// /app/page.tsx

import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';

export default function Page() {
  return (
    // These are Tailwind classes:
    <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">
    // ...
  )
}

기존 CSS 규칙을 작성하거나 스타일을 JSX와 별도로 유지하는 것을 선호한다면 CSS Modules가 훌륭한 대안이 될 수 있습니다.

CSS Modules

CSS 모듈을 사용하면 고유한 클래스 이름을 자동으로 생성하여 컴포넌트에 CSS의 범위를 지정할 수 있으므로 스타일 충돌에 대해 걱정할 필요가 없습니다.
이 강좌에서는 Tailwind를 계속 사용하겠지만, 잠시 시간을 내어 CSS 모듈을 사용하여 위 퀴즈와 동일한 결과를 얻을 수 있는 방법을 살펴보겠습니다.
app/ui에 home.module.css라는 새 파일을 만들고 다음 CSS 규칙을 추가합니다.

1
2
3
4
5
6
7
8
9

/* /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파일 내에서 스타일을 가져오고 추가한 <div>의 Tailwind 클래스 이름을 styles.shape로 바꿉니다.

1
2
3
4
5
6
7
8

// /app/page.tsx

import styles from '@/app/ui/home.module.css';

//...
<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">
    <div className={styles.shape}></div>;
// ...

변경 내용을 저장하고 브라우저에서 미리 봅니다. 이전과 동일한 모양이 표시될 것입니다.
Tailwind와 CSS 모듈은 Next.js 애플리케이션의 스타일을 지정하는 가장 일반적인 두 가지 방법입니다. 어느 쪽을 사용하든 선호도에 따라 선택할 수 있으며 동일한 애플리케이션에서 두 가지 모두 사용할 수도 있습니다.

Using the clsx library to toggle class names

상태나 다른 조건에 따라 요소의 스타일을 조건부로 지정해야 하는 경우가 있을 수 있습니다. clsx는 클래스 이름을 쉽게 전환할 수 있는 라이브러리입니다. 자세한 내용은 문서를 참조하는 것이 좋지만 기본적인 사용법은 다음과 같습니다.

  • 상태를 받아들이는 InvoiceStatus 컴포넌트를 만들고 싶다고 가정해 보겠습니다. 상태는 'pending' 또는 'paid'일 수 있습니다.
  • 'paid'인 경우 색상을 녹색으로 지정하면 됩니다. 'pending'인 경우 색상을 회색으로 지정합니다.

다음과 같이 clsx를 사용하여 클래스를 조건부로 적용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// /app/ui/invoices/status.tsx

import clsx from 'clsx';

export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

Other styling solutions

앞서 설명한 접근 방식 외에도 다음과 같은 방법으로 Next.js 애플리케이션의 스타일을 지정할 수 있습니다.

자세한 내용은 CSS 문서를 참조하세요.

Summary

  • Global Styling 방법 : global.css, app/layout.tsx
  • Styling 방법 : Tailwind CSS, CSS Modules, Sass, CSS-in-JS
  • clsx 라이브러리 : 상태나 조건에 따라 요소의 클래스 이름(즉, 스타일)을 조건부로 지정할 수 있다.
Translation, Next.js Learn
Next.js Next.js conf Next.js 14
This post is licensed under CC BY 4.0 by the author.