첫 번째 컴포넌트

원문 https://ko-react-exy5xcwjj-fbopensource.vercel.app/learn/your-first-component#components-ui-building-blocks

컴포넌트: UI 구성 요소

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

1️⃣ HTML 마크업과 컴포넌트 사용

• 기본 HTML 태그 (<article>, <h1>, <ol>)로 UI 요소를 작성
• React에서는 HTML 태그와 컴포넌트를 결합하여 UI를 구성
• 예: 목차를 나타내는 <TableOfContents /> 컴포넌트를 만들어 여러 페이지에서 재사용 가능

2️⃣ 컴포넌트 작성 및 중첩

• React 컴포넌트는 HTML 태그처럼 순서대로 작성하고 중첩하여 페이지 구성
• 컴포넌트를 활용해 UI를 더 구조화하고 재사용 가능하게 만듬

3️⃣ React의 장점

• 재사용 가능한 UI 요소를 만들어 전체 페이지를 구성
• HTML 태그와 동일한 방식으로 컴포넌트를 작성하고 중첩하여 큰 앱을 효율적으로 관리

✅ 컴포넌트를 활용해 재사용 가능한 UI 요소를 만들고, HTML 태그와 컴포넌트를 결합해 페이지를 구성하는 것이 핵심!

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

컴포넌트 정의하기

export default function Profile() {
  return (
    <img
      src="<https://i.imgur.com/MK3eW3Am.jpg>"
      alt="Katherine Johnson"
    />
  )
}

1단계: 컴포넌트 내보내기