[리액트 공식문서] 컴포넌트 기초

• 컴포넌트는 리액트의 코어 컨셉(Core Concept)이다.

• 리액트의 모든 UI는 컴포넌트의 집합체라고 할 수 있으며, 컴포넌트를 잘 설계하는 것이 리액트 여행을 잘 하는 방법이다.

컴포넌트 (UI를 빌딩하는 블록)

• 리액트에서 가장 중요한 것은 컴포넌트이다.

• HTML, CSS, Javascript를 잘 조합하면 좋은 웹 문서를 만들 수 있다.

• 리액트는 HTML, CSS, Javascript를 조합한 JSX문법으로 컴포넌트를 쉽게 만들 수 있게 해준다.

• 건축의 개념에서 보자면, 앱은 완성된 건축물이고 컴포넌트는 그 조립 단위라고 볼 수 있다.

• 따라서 리액트를 잘 다룬다는 개념은 컴포넌트를 잘 다룬다는 개념과 일치하다고 봐도 무방하다.

// 컴포넌트의 집합 = 웹
<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

• 컴포넌트는 개발자가 직접 만들 수도 있고, 이미 만들어진 수천가지의 컴포넌트를 이용할 수도 있다.

• 개발할 것은 개발하고, 사용할 것은 가져와 사용하면서 웹 개발 여행을 떠나보자!

이미 만들어진 수천가지의 컴포넌트 오픈소스

• Chakra UI : https://chakra-ui.com/

• Material UI : https://mui.com/core/

컴포넌트 정의(선언)

• 과거에는 클래스 컴포넌트를 많이 사용했지만 요즘엔 함수형 컴포넌트를 더 많이 사용한다.

• 따라서 함수형 컴포넌트를 정의하는 방법을 알아볼 것이다.

Step1. 컴포넌트 export (모듈화) 하기

• export prefix를 이용하여 컴포넌트를 **모듈화(외부로 노출)**해야한다. (export는 표준 자바스크립트 문법이다.)

export default function...

Step2. 함수 이름은 대문자로 정의하기

• 리액트 컴포넌트는 일반적인 자바스크립트 함수이지만, 컴포넌트명의 첫번째 글자는 반드시 대문자로 해야한다. 그렇게 하지 않으면 동작하지 않는다.

export default function Profile() {
  ...
}

Step3. JSX 마크업 하기

• 컴포넌트가 return한 JSX가 곧 사용자가 보는 화면(UI)가 된다.

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

컴포넌트의 선언은 반드시 최상단(top-level)에!

• 컴포넌트의 선언은 반드시 최상단에서 해야한다.

• 아래와 같이 컴포넌트를 이중으로 선언하면 예측할 수 없는 버그가 생긴다.

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

• Gallery 내부에 Profile 컴포넌트가 중첩되어 선언되어 있다.

• 이런 경우, 순수 컴포넌트, 상태 관리 등에 문제점이 생긴다.

• 이렇게 선언한 일이 잘 생기지 않으므로, 위와 같이 중첩 컴포넌트를 선언하지 말자.

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

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

• 컴포넌트는 위 코드처럼 꼭 최상단에 분리해서 선언하자.

Recap