[리액트 공식문서 읽기] DESCRIBING THE UI - Your First Component

JaeHong Jeong·2023년 8월 5일

React

리액트 공식문서 읽기

목록 보기

3/24

Overview

컴포넌트는 리액트의 핵심 개념 중 하나이다. 이는 사용자 인터페이스(UI)를 구축하는 기반이며, 리액트 여정을 시작하기에 완벽한 장소이다.

Components: UI building blocks

웹에서, <h1>, <li>태그와 같이 HTM 빌트인 태그를 사용하면 풍부한 구조화된 문서를 만들 수 있다.

<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을 <article>로, 헤딩은 <h1>으로, 축약된 목차를 정렬된 목록으로 <ol>를 사용하여 나타낸다. 마크업은 스타일을 위한 CSS, interactivity를 위한 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 같은 수천개의 리액트 오픈 소스를 활용하여 당작 프로젝트를 시작할 수도 있다.

Defining a component

전통적으로 웹을 만들 때, 웹 개발자가 마크업을 한 후 Javascript를 뿌려 interaction을 추가하였다. 웹 상에 interaction이 있으면 훌륭하게 작동하였다. 이제 많은 사이트와 앱에서 예상된다. 리액트는 동일한 기술을 사용하면서 interactivity를 우선시한다. 다음과 같다 :

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

컴포넌트를 구성하는 방법 :

Step 1: Export the component

export default 는 표준 자바스크립트 문법이다. 파일에서 메인 함수인 것을 표시하고 추후 다른 파일에서 import할 수 있다. (More on importing in Importing and Exporting Components!)

Step 2: Define the function

function Profile() { }을 사용하여 Profile이라는 이름으로 JavaScript함수를 정의한다.

💡 리액트 컴포넌트는 일반 JavaScript 함수이지만 첫글자는 대문자를 사용해야한다. 아니면 작동하지 않는다.

Step 3: Add markup

컴포너는 src와 alt속성을 가진 <img />를 반환한다. <img />는 HTML로 작성된 것처럼 보이지만 내부적으로는 JavaScript이다. JSX 라고 하며 JavaScript에서 마크업을 할 수 있게 해준다.

컴포넌트에서 다음과 같이 반환 문을 모두 한 줄에 작성할 수 있다.

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

그러나 마크업이 모두 반환 키워드와 같은 줄에 있지 않으면 한 쌍의 괄호로 묶어야 한다.

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

Using a component

Profile 컴포넌트를 정의했고, 다른 컴포넌트를 안에 중첩시킬 수 있다. 예를 들어 여러 Profile 컴포넌트를 사용하는 Gallery 컴포넌트를 내보낼 수 있다.

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

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

What the browser sees

대소문자 구분에 주의:

<section> 는 소문자이다, 리액트는 우리가 HTML 태그를 참조한다는 것을 알고 있다.
<Profile /> 는 대문자P 로 시작한다. 리액트는 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>

Nesting and organizing components

컴포넌트는 일반 JavaScript 함수이다. 그래서 같은 파일에 여러개의 컴포넌트를 둘 수 있다. 컴포넌트들이 서로 크든 작든 연관되어 있을 때 편리하다. 만약 파일이 커지면 Profile 컴포넌트를 다른 파일로 분리시킬 수 있다. 이 방법을 여기에서 짧게 공부할 것이다.

왜냐하면 Profile 컴포넌트는 Gallery 컴포넌트 안에서 렌더링된다.(심지어 여러 번) 우리는 Gallery 컴포넌트를 부모 컴포넌트, 렌더링되는 각 Profile 컴포넌트들을 자식 이라고 부를 수 있다. 이 부분이 리액트의 마법이다 : 컴포넌트를 한번 정의해놓으면, 몇 번이던지 원하는 만큼 여러 곳에서 사용할 수 있다는 점.

💡 컴포넌트들은 다른 컴포넌트에서 렌더링될 수 있다. 하지만 정의 부분을 중첩하면 안된다.

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() {
  // ...
}

자식 컴포넌트가 부모로 부터 데이터가 필요하면 props로 전달하면 된다.

Recap

리액트를 사용하면 앱에 대한 재사용 가능한 UI 요소인 구성 요소를 만들 수 있다.
리액트 앱에서 모든 UI 조각은 컴포넌트이다.
컴포넌트들은 일반 JavaScript 함수이지만 차이점은
1. 이름 첫글자는 대문자여야한다.
2. JSX를 반환해야한다.

JaeHong Jeong

반갑습니다.

이전 포스트

[리액트 공식문서 읽기] Thinking in React

다음 포스트

[리액트 공식문서 읽기] DESCRIBING THE UI - Your First Component