Your First Component첫번째 컴포넌트

Components: UI building blocks컴포넌트: UI 구성 요소

On the Web, HTML lets us create rich structured documents with its built-in set of tags like <h1> and <li>: 웹에서는 HTML을 통해 <h1>, <li>와 같은 태그를 사용하여 풍부한 구조의 문서를 만들 수 있습니다:

<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>

This markup represents this article <article>, its heading <h1>, and an (abbreviated) table of contents as an ordered list <ol>. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web. 이 마크업은 아티클을 <article>로, 제목을 <h1>로, (축약된) 목차를 정렬된 목록 <ol>로 나타냅니다. 이와 같은 마크업은 스타일을 위한 CSS, 상호작용을 위한 JavaScript와 결합되어 웹에서 볼 수 있는 모든 사이드바, 아바타, 모달, 드롭다운 등 모든 UI의 기반이 됩니다.

React lets you combine your markup, CSS, and JavaScript into custom “components”, reusable UI elements for your app. The table of contents code you saw above could be turned into a <TableOfContents /> component you could render on every page. Under the hood, it still uses the same HTML tags like <article>, <h1>, etc. React를 사용하면 마크업, CSS, JavaScript를 앱의 재사용 가능한 UI 요소인 사용자 정의 “컴포넌트”로 결합할 수 있습니다. 위에서 본 목차 코드는 모든 페이지에 렌더링할 수 있는 <TableOfContents /> 컴포넌트로 전환될 수 있습니다. 내부적으로는 여전히 <article>, <h1> 등과 같은 동일한 HTML 태그를 사용합니다.

Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you’re reading is made out of React components: HTML 태그와 마찬가지로 컴포넌트를 작성, 순서 지정 및 중첩하여 전체 페이지를 디자인할 수 있습니다. 예를 들어, 여러분이 읽고 있는 문서 페이지는 React 컴포넌트로 구성되어 있습니다:

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

As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with <TableOfContents />! You can even jumpstart your project with the thousands of components shared by the React open source community like Chakra UI and Material UI. 프로젝트가 성장함에 따라 이미 작성한 컴포넌트를 재사용하여 많은 디자인을 구성할 수 있으므로 개발 속도가 빨라집니다. 위의 목차는 <TableOfContents />를 사용하여 어떤 화면에도 추가할 수 있습니다! Chakra UI, Material UI와 같은 React 오픈소스 커뮤니티에서 공유되는 수천 개의 컴포넌트로 프로젝트를 빠르게 시작할 수도 있습니다.

Defining a component컴포넌트 정의하기

Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: a React component is a JavaScript function that you can sprinkle with markup. Here’s what that looks like (you can edit the example below): 기존에는 웹 페이지를 만들 때 웹 개발자가 콘텐츠를 마크업한 다음 JavaScript를 뿌려 상호작용을 추가했습니다. 이는 웹에서 상호작용이 중요했던 시절에 효과적이었습니다. 이제는 많은 사이트와 모든 앱에서 상호작용을 기대합니다. React는 동일한 기술을 사용하면서도 상호작용을 우선시합니다. React 컴포넌트는 마크업으로 뿌릴 수 있는 JavaScript 함수입니다. 그 모습은 다음과 같습니다(아래 예시를 편집할 수 있습니다):

And here’s how to build a component: 컴포넌트를 빌드하는 방법은 다음과 같습니다:

Step 1: Export the component컴포넌트 내보내기

The export default prefix is a standard JavaScript syntax (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in Importing and Exporting Components!) export default 접두사는 표준 JavaScript 구문입니다(React에만 해당되지 않음). 이 접두사를 사용하면 나중에 다른 파일에서 가져올 수 있도록 파일에 주요 기능을 표시할 수 있습니다. (더 자세한 내용은 컴포넌트 import 및 export를 참고하세요!)

Step 2: Define the function함수 정의하기

With function Profile() { } you define a JavaScript function with the name Profile. function Profile() { }을 사용하면 Profile이라는 이름의 JavaScript 함수를 정의할 수 있습니다.

Step 3: Add markup마크업 추가하기

The component returns an <img /> tag with src and alt attributes. <img /> is written like HTML, but it is actually JavaScript under the hood! This syntax is called JSX, and it lets you embed markup inside JavaScript. 이 컴포넌트는 src 및 alt 속성을 가진 <img /> 태그를 반환합니다. <img /> 는 HTML처럼 작성되었지만 실제로는 JavaScript입니다! 이 구문을 JSX라고 하며, JavaScript 안에 마크업을 삽입할 수 있습니다.

Return statements can be written all on one line, as in this component: 반환문은 이 컴포넌트에서처럼 한 줄에 모두 작성할 수 있습니다:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

But if your markup isn’t all on the same line as the return keyword, you must wrap it in a pair of parentheses: 그러나 마크업이 모두 return 키워드와 같은 라인에 있지 않은 경우에는 다음과 같이 괄호로 묶어야 합니다:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

Using a component컴포넌트 사용하기

Now that you’ve defined your Profile component, you can nest it inside other components. For example, you can export a Gallery component that uses multiple Profile components: 이제 Profile 컴포넌트를 정의했으므로 다른 컴포넌트 안에 중첩할 수 있습니다. 예를 들어, 여러 Profile 컴포넌트를 사용하는 Gallery 컴포넌트를 내보낼 수 있습니다:

What the browser sees브라우저에 표시되는 내용

Notice the difference in casing: 대소문자의 차이에 주목하세요:

• <section> is lowercase, so React knows we refer to an HTML tag.
• <Profile /> starts with a capital P, so React knows that we want to use our component called Profile.

And Profile contains even more HTML: <img />. In the end, this is what the browser sees: 그리고 <Profile /> 은 더 많은 HTML <img />가 포함되어 있습니다. 결국 브라우저에 표시되는 내용은 다음과 같습니다:

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Nesting and organizing components컴포넌트 중첩 및 구성

Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move Profile to a separate file. You will learn how to do this shortly on the page about imports. 컴포넌트는 일반 JavaScript 함수이므로 같은 파일에 여러 컴포넌트를 포함할 수 있습니다. 컴포넌트가 상대적으로 작거나 서로 밀접하게 관련되어 있을 때 편리합니다. 이 파일이 복잡해지면 언제든지 Profile 을 별도의 파일로 옮길 수 있습니다. 이 방법은 바로 다음 챕터인 컴포넌트 import 및 export 페이지에서 확인할 수 있습니다.

Because the Profile components are rendered inside Gallery—even several times!—we can say that Gallery is a parent component, rendering each Profile as a “child”. This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like. Profile 컴포넌트는 Gallery 내에 렌더링되기 때문에(심지어 여러 번!), Gallery는 각 Profile 을 “자식”으로 렌더링하는 부모 컴포넌트라고 말할 수 있습니다. 컴포넌트를 한 번 정의한 다음 원하는 곳에 원하는 만큼 여러 번 사용할 수 있다는 점이 바로 React의 마법입니다.

export default function Gallery() {
  // 🔴 Never define a component inside another component!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Declare components at the top level
function Profile() {
  // ...
}