컴포넌트란?

리액트는 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 다룰 수 있다. 리액트는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 이러한 컴포넌트들을 마치 레고 블록을 조립하듯 끼워 맞춰서 새로운 컴포넌트를 만들 수 있다.

Component: 입력(props)를 받아 출력(Element)하는 역할

개념적으로 컴포넌트는 자바스크립트 함수와 유사하다. props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 리액트 엘리먼트를 반환한다.

함수가 입력을 받아 출력을 리턴하는 것처럼 리액트 컴포넌트도 입력을 받아 정해진 출력을 리턴한다.

리액트 컴포넌트는 리액트 엘리먼트를 반환하는데, 이는 리액트 앱을 구성하는 가장 작은 빌딩 블록들이다. 자바스크립트 객체 형태로 존재하며, 화면에 보이는 것을 기술한다.

컴포넌트 만들기

리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만든다. 클래스로 컴포넌트를 만드는 방식은 기본 설정 코드를 작성하는 듯 함수로 만드는 컴포넌트에 비해 단점이 많아 지금은 선호하지 않는다.

import "./App.css";

function Header() { 
  return (
    <header>
      <h1>header</h1>
    </header>
  ); 
}

function App() {
  return <div className="App"></div>;
}

export default App;

함수를 이용해 Header라는 이름의 컴포넌트를 부모 컴포넌트(App 컴포넌트) 밖에서 만든다. Header 컴포넌트는 HTML을 반환한다. 여러 줄로 이루어진 HTML을 반환할 때는 return문에서 반환할 HTML을 소괄호로 감싼 다음 세미콜론을 꼭 붙여서 반환해야 한다.

이렇듯 함수를 이용하면 매우 간단하게 리액트 컴포넌트를 만들 수 있다. 즉, 함수를 선언하고 해당 함수가 HTML 요소를 반환하도록 만들면 된다. 함수를 사용해 만든 컴포넌트를 특별하게 함수 컴포넌트라고 한다.

참고로 함수 선언식이 아니라 화살표 함수로도 컴포넌트를 만들 수 있다.

<aside> ❗

컴포넌트 이름은 항상 대문자로 시작해야 한다.

</aside>

리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식한다.

예를 들어 <div /> 는 HTML div 태그를 나타내지만, <Welcome /> 은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 한다.

컴포넌트 렌더링