HTML과 Next.js 레이아웃의 이해

HTML의 기본 개념

HTML(Hypertext Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어입니다. 웹 페이지의 콘텐츠를 여러 개의 문단, 목록, 이미지, 데이터 테이블 등으로 구조화하는 데 사용됩니다.

HTML 요소의 구성

여는 태그: <p>와 같이 요소가 시작되는 부분
닫는 태그: </p>와 같이 요소가 끝나는 부분
콘텐츠: 태그 사이의 실제 내용
속성: 요소에 대한 추가 정보를 제공 (예: class="editor-note")

HTML 문서의 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>페이지 제목</title>
  </head>
  <body>
    <!-- 실제 콘텐츠가 들어가는 곳 -->
  </body>
</html>

Next.js의 레이아웃 시스템

Next.js는 파일 시스템 기반 라우팅을 사용하여 HTML 구조를 더욱 체계적으로 관리할 수 있게 해줍니다.

페이지 생성

페이지는 특정 URL에서 렌더링되는 UI 컴포넌트입니다. app 디렉토리 내에 page.tsx 파일을 생성하여 정의할 수 있습니다:

export default function Page() {
  return <h1>안녕하세요, Next.js!</h1>
}

레이아웃 생성

레이아웃은 여러 페이지에서 공유되는 UI 요소입니다. 상태를 유지하고 다시 렌더링되지 않는 특징이 있습니다:

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

중첩 라우트

URL 구조에 따라 폴더를 중첩하여 복잡한 페이지 구조를 만들 수 있습니다. 예를 들어:

/ (루트)
/blog (블로그 메인)
/blog/[slug] (개별 블로그 포스트)

페이지 간 링크

next/link의 <Link> 컴포넌트를 사용하여 페이지 간 이동을 구현할 수 있습니다:

import Link from 'next/link'
 
export default function PostList() {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

이러한 구조화된 접근 방식을 통해 Next.js는 HTML의 기본 개념을 확장하여 더 효율적이고 유지보수가 쉬운 웹 애플리케이션을 구축할 수 있게 해줍니다.