NextJS 공식문서 Chapter 2 관련 용어 및 정리

Global styles 적용

global.css 파일은 모든 페이지에 적용될 전역 스타일을 정의하는 CSS 파일입니다. 

layout.tsx에서 global.css 가져오기

• . /app/layout.tsx 파일을 열고, 최상단에 global.css를 가져오는 코드를 추가합니다.
• import '@/app/ui/global.css'; 를 적용하여 global.css에 정의된 모든 스타일이 애플리케이션 전반에 걸쳐 적용됩니다.

Tailwind

유틸리티-퍼스트(Utility-First) CSS 프레임워크

• Tailwind CSS는 개발자가 HTML 또는 TSX(React + TypeScript) 마크업 내에서 직접 유틸리티 클래스들을 사용하여 스타일을 지정할 수 있게 해줍니다. 

장점

• 글로벌 스타일링: Tailwind CSS에서 모든 스타일은 전역적으로 공유되지만, 각 클래스는 개별적으로 적용됩니다. 이는 특정 요소에 스타일을 추가하거나 삭제할 때 별도의 스타일 시트를 유지하거나 관리할 필요가 없다는 것을 의미합니다.
• 스타일 충돌 없음: 클래스가 개별 요소에만 적용되기 때문에, 스타일 충돌이나 CSS 번들의 크기가 애플리케이션이 확장되면서 커지는 문제를 걱정할 필요가 없습니다.

예시 코드

<div
  className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"
  /* relative: 이 div 요소를 상대적으로 위치시킵니다. 
     다른 위치 속성(top, right, bottom, left)을 사용할 수 있도록 합니다. */
  /* w-0: 이 div 요소의 너비를 0으로 설정합니다. */
  
  /* h-0: 이 div 요소의 높이를 0으로 설정합니다. */
  
  /* border-l-[15px]: 왼쪽 테두리의 너비를 15px로 설정합니다. 
     이와 같이 Tailwind에서 임의의 크기를 사용할 수 있는 
     "JIT(Just-In-Time)" 유틸리티가 적용되었습니다. */
  
  /* border-r-[15px]: 오른쪽 테두리의 너비를 15px로 설정합니다. */
  
  /* border-b-[26px]: 아래쪽 테두리의 너비를 26px로 설정합니다. 
     이 값은 요소의 세로 방향의 크기를 설정하는 데 사용됩니다. */
  
  /* border-l-transparent: 왼쪽 테두리의 색상을 투명하게 설정하여 
     이 부분이 보이지 않도록 합니다. */
  
  /* border-r-transparent: 오른쪽 테두리의 색상을 투명하게 설정하여 
     이 부분이 보이지 않도록 합니다. */
  
  /* border-b-black: 아래쪽 테두리의 색상을 검정색으로 설정합니다. 
     이 테두리만 보이도록 설정하여 삼각형 모양을 만듭니다. */
  
/>

 

CSS Modules

CSS Modules는 컴포넌트 기반 스타일링을 가능하게 하는 CSS 파일의 한 형태입니다. CSS Modules는 클래스 이름을 컴포넌트 단위로 자동으로 고유하게 만들어 주므로, 스타일 충돌을 피할 수 있습니다. 

예시 코드

import styles from '@/app/ui/home.module.css';를 통해 home.module.css 파일에서 정의한 스타일을 styles 객체로 가져옵니다.

<div className={styles.shape} />에서 CSS Modules의 shape 클래스를 적용하여 삼각형 모양을 렌더링합니다.

/* /app/ui/home.module.css */

.shape {
  height: 0; /* 높이를 0으로 설정 */
  width: 0; /* 너비를 0으로 설정 */
  border-bottom: 30px solid black; /* 아래쪽 테두리를 검정색으로 설정 */
  border-left: 20px solid transparent; /* 왼쪽 테두리를 투명하게 설정 */
  border-right: 20px solid transparent; /* 오른쪽 테두리를 투명하게 설정 */
}

/* app/page.tsx */
import AcmeLogo from '@/app/ui/acme-logo';
import { ArrowRightIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import styles from '@/app/ui/home.module.css';
 
export default function Page() {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <div className={styles.shape} />
    // ...
  )
}

clsx 라이브러리

clsx는 클래스 이름을 조건부로 적용할 수 있는 JavaScript 라이브러리입니다. 여러 개의 클래스를 결합하거나 조건에 따라 특정 클래스를 추가/제거하는 작업을 간단하게 수행할 수 있습니다.

예시 코드

InvoiceStatus 컴포넌트에서 status prop을 사용해 조건에 따라 다른 클래스를 적용하여 스타일을 동적으로 변경했습니다.

/* /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',  // 'pending' 상태일 때 적용되는 클래스
          'bg-green-500 text-white': status === 'paid',      // 'paid' 상태일 때 적용되는 클래스
        },
      )}
    >
      {/* 상태에 따라 여기에 추가 콘텐츠가 들어갈 수 있습니다 */}
    </span>
  );
}