[React] React의 컴포넌트

리액트에서는 자바스크립트 함수가 html 태그를 반환하도록 설정할 수 있고, 이러한 자바스크립트 함수를 컴포넌트라고 한다. 컴포넌트를 부를 때에는 함수 이름으로 부른다. ex) App 컴포넌트

클래스를 사용하여 컴포넌트를 만들 수도 있지만, 직접 작성해야 하는 코드의 양이 많아지기 때문에 일반적으로 함수 컴포넌트를 사용한다.

컴포넌트를 만들 때에는 주의해야 할 점이 있다.
컴포넌트를 생성하는 함수의 이름은 반드시 첫 글자가 대문자여야 한다. 첫 글자를 소문자로 하는 경우, 리액트는 컴포넌트로 인식하지 않는다.

컴포넌트 예시이다.

const Header = () => {
  return <h1>Header</h1>;
};

이렇게 컴포넌트를 만든다고 해서 화면에 그려지는 게 아니다. 이 컴포넌트를 App.jsx에 추가해줘야 한다.

function App() {
  return (
    <>
      <Header />
      <h1>안녕 리액트!</h1>
    </>
  );
}

이 때 Header 컴포넌트처럼, 다른 컴포넌트의 리턴문 내부에 포함되는 컴포넌트를 리액트에서는 자식 컴포넌트/ 다른 컴포넌트를 포함하는 상위 컴포넌트를 부모 컴포넌트라고 한다. App컴포넌트 아래에 Header가 있으니 계층 구조로서 컴포넌트 간의 관계를 표현하는게 가능하다. 우리가 Main컴포넌트와 Footer 컴포넌트를 만드는 경우, 이 컴포넌트들도 화면에 렌더링하기 위해서는 App 컴퍼넌트의 자식 컴포넌트로 배치해줘야 한다.

모든 리액트 컴포넌트들은 이 App 컴포넌트를 최상위 조상으로 갖는 계층 구조를 갖는다. 모든 컴퍼넌트의 조상역할을 하는 App 컴포넌트를 우리는 특별히 모든 컴포넌트들의 뿌리 역할을 한다고 해서 Root 컴포넌트라고 부른다.