Describing the UI - Your first component

hyocho·2023년 4월 29일

React

목록 보기

12/23

Your first component

컴포넌트는 리액트의 핵심 개념 중 하나이다. 컴포넌트는 사용자 인터페이스를 구축하는 기반이 되므로 React 여정을 시작하기에 완벽한 장소가 된다.

Components: UI building blocks

웹에서 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 그리고 자바스크립트를 사용자 정의 "컴포넌트", 즉 앱에 재사용 가능한 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

전통적으로 웹 페이지를 만들 때, 웹 개발자들은 내용을 마크업하고 일부 자바스크립트를 더해 상호작용 하도록 했다. 이것은 상호작용이 웹에서 좋은 것일 때 잘 작동했지만 지금은 많은 사이트와 모든 앱에서 예상되어진다. 리액트는 상호작용을 최우선으로 하지만 여전히 동일 기술을 사용한다 : 리액트 컴포넌트는 마크업이 추가된 자바스크립트 함수이다.

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

그리고 어떻게 컴포넌트를 만드는지 알아보자.

Step 1: Export the component

export default prefix는 표준 자바스크립트 문법이다(리액트에만 해당되지 않음). 나중에 다른 파일에서 불러올 수 있다. (더 자세한 것은 Importing and Exporting Components에서! )

Step 2: Define the function

function Profile() { }으로 Profile 이라는 자바스크립트 함수를 정할 수 있다.

리액트 컴포넌트는 일반적인 자바스크립트 함수이지만, 이름은 대문자로만 시작되어야 하며, 아니면 작동하지 않는다.

Step 3: Add markup

컴포넌트는 src와 alt속성이 있는 <img />태그를 반환한다. <img />는 HTML처럼 쓰여졌지만 실제로는 자바스크립트 문법이다. 이것은 JSX라고 하며, 자바스크립트 안에서 마크업을 포함할 수 있도록 한다.

리턴 구문은 이 컴포넌트와 같이 한 줄로 작성할 수 있다.

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

하지만 마크업이 return 키워드와 동일한 줄에 있지 않으면 괄호()로 묶어야 한다.

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

괄호가 없으면 return 뒤에 나오는 코드들은 무시된다.

Using a component

Profile 컴포넌트를 정의했으므로, 다른 컴포넌트의 내부에 중첩시킬 수 있다. 예를 들어, Gallery컴포넌트에 export하여 여러개의 Profile 컴포넌트를 사용할 수 있다.

//App.js
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

컴포넌트는 일반적인 자바스크립트 함수이므로 같은 파일에 여러 컴포넌트를 보관할 수 있다. 이는 컴포넌트들이 상대적으로 작거나 서로 밀접하게 관련되어 있는 경우에 편리하다. 이 파일이 복잡해질 경우, Profile을 별개의 파일로 분리할 수 있다. import에 대한 페이지에서 이 작업을 수행하는 방법에 대해 간단히 설명할 것이다.

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를 이용해서 전달해주자.

DEEP DIVE - Components all the way down

리액트 어플리케이션은 "root"라는 컴포넌트로부터 시작된다. 일반적으로 새 프로젝트를 시작하면 자동으로 생성된다. Sandcodebox또는 CreateReactApp을 사용하면 src하위의 App.js에, Next.js를 사용한다면 pages하위의 index.js에 정의된다. 이 예제에서는 root컴포넌트를 내보내고 있다.

대부분의 리액트 앱은 컴포넌트를 사용한다. 이것은 버튼과 같은 재사용한 부분 뿐만 아니라 사이드바, 리스트, 궁극적으로는 전체 페이지와 같은 더 큰 부분에도 컴포넌트를 사용한다는 것을 의미한다. 단 한 번만 사용되어도 괜찮은 컴포넌트는 UI 코드 및 마크업을 구성하는 데 유용한 방법이다.

리액트 기반의 프레임워크는 이를 한 단계 더 발전시킨다. 빈 HTML파일을 사용하고 자바스크립트로 페이지를 관리하는 리액트를 "take over"하는 대신, 컴포넌트로부터 HTML을 자동적으로 생성한다. 이렇게 하면 자바스크립트 코드가 로드되기 전에 앱이 일부 컨텐츠를 표시할 수 있다.

여전히 많은 웹 사이트들이 기존 HTML페이지에 상호작용하는 데에만 리액트를 사용한다. 전체 페이지에 대해 단일 루트 컴포넌트가 아닌 많은 루트 컴포넌트가 있다. 원하는 만큼 많이 - 혹은 적게 - 필요한 만큼 사용할 수 있다.