[문서] 리액트 공식문서 톱아보기: 컴포넌트(1)

1. 컴포넌트: UI 구성 요소

React의 핵심 개념인 컴포넌트는 마크업, CSS, JavaScript를 하나로 모아 독립적이고 재사용 가능하게 만든 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"
    />
  )
}

2. 컴포넌트 정의하기

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

• export default 접두사를 사용!  표준 JavaScript 구문이다(React에만 해당되지 않음)
• 내보낼 때는 export, 가져올때는 import 접두사를 사용한다. 

2단계) 함수 정의하기

• function 컴포넌트명 () { }을 사용하면 "컴포넌트명" 이라는 이름의 JavaScript함수를 정의할 수 있다.
• 이름은 반드시 대문자로 시작해야 함. 그렇지 않으면 작동하지 않음!! ex)Header

3단계) 마크업 추가하기

• 태그는 HTML과 유사하게 생겼지만 실제로는 JavaScript 로 이루어져 있다.
• JavaScript 내부에 HTML과 유사한 마크업을 작성할 수 있는 구문을 JSX라 한다.
• 작성한 마크업 태그는 return 으로 반환해줘야 화면에 표출된다.

// 한 줄일 경우: 괄호 없이 작성 가능
return <img src="example.jpg" alt="설명" />;

// 여러 줄일 경우: 반드시 괄호로 묶어야 함
return (
  <div>
    <img src="example.jpg" alt="설명" />
  </div>
);

3. 컴포넌트 사용하기

컴포넌트는 다른 컴포넌트 안에서 중첩해서 사용할 수 있기에 반복적인 ui에 용이하다.

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>
  );
}

주의

컴포넌트를 다른 컴포넌트에서 렌더링할 수 있지만, 정의를 중첩하는건 불가능

export default function Gallery() {
  // 🔴 절대 컴포넌트 안에 다른 컴포넌트를 정의하면 안 됩니다!
  function Profile() {
    // ...
  }
  // ...
}

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

// ✅ 최상위 레벨에서 컴포넌트를 선언합니다
function Profile() {
  // ...
}

브라우저에 표시되는 내용

리액트는 태그의 대소문자를 구분하여, 이 태그가 html인지, 컴포넌트인지 파악한다.

• JSX로 작성된 모든 컴포넌트는 최종적으로 일반 HTML 요소로 변환되어 렌더링
•  <Profile /> 컴포넌트가 브라우저 개발자 도구에서는 <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>