첫 번째 컴포넌트

컴포넌트는 리액트의 핵심 개념 중 하나입니다. 컴포넌트는 사용자 인터페이스(UI)를 구축하는 데 사용되며 리액트 여행을 시작하는 이상적인 장소입니다!

컴포넌트: UI 구축 블록

웹에서는 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>

이 마크업은 이 <article> 문서, <h1> 제목, 그리고 목차를 나타내는 (요약된) 순서 목록인 <ol>을 나타냅니다. 이와 같은 마크업은 CSS를 통해 스타일을 지정하고 JavaScript를 통해 상호 작용성을 부여하여 웹 상에서 보이는 모든 사이드바, 아바타, 모달, 드롭다운과 같은 UI의 기본 요소가 됩니다.

리액트를 사용하면 마크업, CSS, JavaScript를 결합하여 사용자 정의 "컴포넌트"인 재사용 가능한 UI 요소를 만들 수 있습니다. 위에서 보았던 목차 코드는 각 페이지에서 렌더링할 수 있는 <TableOfContents /> 컴포넌트로 변환될 수 있습니다. 내부적으로는 여전히 <article>, <h1> 등과 같은 동일한 HTML 태그를 사용합니다.

HTML 태그와 마찬가지로 컴포넌트를 조합, 순서화, 중첩하여 전체 페이지를 디자인할 수 있습니다. 예를 들어, 현재 읽고 있는 문서 페이지는 다음과 같은 리액트 컴포넌트로 구성됩니다.

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

프로젝트가 성장함에 따라 많은 디자인 요소가 이미 작성한 컴포넌트를 재사용하여 구성될 수 있다는 사실을 알게될 것입니다. 위의 목차는 <TableOfContents />를 사용하여 어떤 화면에도 추가할 수 있습니다! 또한 Chakra UI나 Material UI와 같은 리액트 오픈 소스 커뮤니티에서 공유하는 수천 개의 컴포넌트를 사용하여 프로젝트를 시작할 수도 있습니다.

컴포넌트 정의

전통적으로 웹 페이지를 생성할 때, 웹 개발자는 콘텐츠를 마크업한 후 일부 JavaScript를 추가하여 상호 작용성을 부여했습니다. 이는 웹에서 상호 작용이 필요한 경우에는 훌륭한 방법이었습니다. 그러나 이제는 많은 사이트와 모든 앱에서 상호 작용이 필요한 것으로 간주됩니다. 리액트는 여전히 동일한 기술을 사용하면서 상호 작용성을 우선시하는데, 리액트 컴포넌트는 마크업을 넣을 수 있는 JavaScript 함수입니다. 이렇게 보입니다 (아래 예제를 편집할 수 있습니다):

그리고 컴포넌트를 작성하는 방법은 다음과 같습니다.

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

export default 접두사는 리액트에 특정된 것이 아닌 표준 JavaScript 구문입니다. 이를 사용하면 파일에서 주요 함수를 표시하여 다른 파일에서 가져올 수 있습니다. (컴포넌트 가져오기에 대해서는 컴포넌트 가져오기와 내보내기에서 자세히 알아보세요!)

단계 2: 함수 정의

함수 Profile() { }를 사용하여 Profile이라는 이름의 JavaScript 함수를 정의합니다.

주의 리액트 컴포넌트는 일반적인 JavaScript 함수입니다. 그러나 이름은 반드시 대문자로 시작해야 동작합니다!

단계 3: 마크업 추가

이 컴포넌트는 src와 alt 속성이 있는 <img /> 태그를 반환합니다. <img />는 HTML과 같이 작성되었지만 실제로는 JavaScript입니다! 이 구문은 JSX라고 하는 것으로, JavaScript 내에서 마크업을 포함할 수 있도록 해줍니다.

return 문은 한 줄로 작성될 수도 있습니다.

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

그러나 마크업이 return 키워드와 동일한 줄에 없는 경우, 괄호로 묶어야 합니다.

return (
  <div>
    <img src="https://i.imgur.com/MK3eW

3As.jpg" alt="Katherine Johnson" />
  </div>
);

주의 괄호 없이 return 이후의 코드는 무시되게 됩니다!

컴포넌트 사용하기

이제 Profile 컴포넌트를 정의했으므로 다른 컴포넌트 내에서 중첩시킬 수 있습니다. 예를 들어, 여러 개의 Profile 컴포넌트를 사용하는 Gallery 컴포넌트를 내보낼 수 있습니다.

브라우저에서 보이는 내용

대소문자의 차이에 주의하세요:

• <section>은 소문자로 시작하므로 리액트는 HTML 태그를 참조한다는 것을 알 수 있습니다.
• <Profile />은 대문자로 시작하므로 리액트는 Profile이라는 컴포넌트를 사용하려는 것을 알 수 있습니다.

그리고 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>

컴포넌트 중첩과 구성

컴포넌트는 일반적인 JavaScript 함수이므로 같은 파일에 여러 컴포넌트를 유지할 수 있습니다. 이는 컴포넌트가 상대적으로 작거나 서로 밀접한 관련이 있을 때 편리합니다. 이 파일이 혼잡해지면 Profile을 별도의 파일로 이동할 수 있습니다. 곧 가져오기 페이지에서 이에 대해 자세히 알게될 것입니다.

Profile 컴포넌트가 Gallery 내에서 렌더링되기 때문에 Gallery는 각각 "자식"으로 Profile을 렌더링하는 부모 컴포넌트입니다. 이것이 리액트의 매력 중 일부입니다. 컴포넌트를 한 번 정의한 다음 원하는 만큼의 장소와 횟수에 따라 사용할 수 있습니다.

컴포넌트 중첩 시 주의 사항

컴포넌트는 다른 컴포넌트를 렌더링할 수 있지만 절대로 그들의 정의를 중첩해서 사용해서는 안 됩니다.

export default function Gallery() {
  // 🔴 절대로 다른 컴포넌트 내에서 컴포넌트를 정의하지 마세요!
  function Profile() {
    // ...
  }
  // ...
}

위의 코드 조각은 매우 느리고 버그를 일으킵니다. 대신 모든 컴포넌트를 최상위 수준에서 정의하세요:

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

// ✅ 최상위 수준에서 컴포넌트를 선언하세요
function Profile() {
  // ...
}

자식 컴포넌트가 부모로부터 데이터를 필요로 할 때는 정의를 중첩하는 대신 프롭스(props)를 통해 전달하세요.

요약

리액트에 대한 첫 번째 접선을 경험했습니다! 몇 가지 핵심 포인트를 다시 확인해보겠습니다.

• 리액트를 사용하면 앱에 재사용 가능한 UI 요소인 컴포넌트를 생성할 수 있습니다.
• 리액트 앱에서 UI의 모든 부분은 컴포넌트입니다.
• 리액트 컴포넌트는 일반적인 JavaScript 함수입니다. 다만,
  1. 이름은 항상 대문자로 시작해야 합니다.
  2. JSX 마크업을 반환합니다.