첫 컴포넌트 만들기

첫 컴포넌트 만들기

React로 화면을 만들다 보면 결국 컴포넌트를 조립하는 일이 됩니다. 컴포넌트는 React UI의 가장 기본적인 벽돌이라서, 여기부터 차근차근 시작하는 게 제일 좋아요. 우리가 만들려는 컴포넌트는 마크업과 CSS, 자바스크립트를 하나로 묶어 재사용할 수 있게 해주는 조각이에요.

출처: React 공식 문서 — Your First Component

컴포넌트가 뭔가요

컴포넌트는 앱에서 쓰는 재사용 가능한 UI 단위예요. 가령 목차 하나를 통째로 <TableOfContents />라는 컴포넌트로 만들어 두면, 페이지가 몇 개든 어디서든 같은 컴포넌트를 불러 쓸 수 있어요. React 앱은 이렇게 'UI를 부품으로 나누고 다시 조립한다'는 생각으로 출발해요.

컴포넌트 정의하기

React 컴포넌트는 특별한 기술이 아니라, JSX를 섞어 반환하는 평범한 자바스크립트 함수예요. 정의할 때 세 가지만 기억하면 돼요.

1단계 — 컴포넌트를 내보낸다. export default는 React 전용 문법이 아니라 자바스크립트 표준이에요. 파일의 메인 함수를 밖에서 불러 쓸 수 있게 표시해 주는 역할을 해요.

2단계 — 함수를 정의한다. function Profile() { }처럼 일반 함수를 만들어요. 이때 이름은 반드시 대문자로 시작해야 해요. 소문자로 시작하면 React가 그 태그를 컴포넌트로 인식하지 못해서 제대로 동작하지 않아요.

3단계 — JSX를 반환한다. 컴포넌트는 화면에 그릴 JSX를 돌려줘요. 반환이 한 줄이면 return <img ... />;처럼 바로 쓸 수 있고, 줄이 길어지면 괄호로 감싸서 이어 씁니다.

return (
  <div>
    <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

여기서 핵심은 <img />처럼 HTML처럼 보이는 문법이 사실 내부적으로는 자바스크립트라는 점이에요. 이렇게 자바스크립트 안에 마크업을 심어 쓰는 문법을 JSX라고 불러요.

컴포넌트 사용하기

한 번 정의해 둔 컴포넌트는 다른 컴포넌트 안에 얼마든지 중첩해서 쓸 수 있어요. Profile 컴포넌트 여러 개를 모아 Gallery 컴포넌트를 만들고, 그걸 또 어디에든 심으면 돼요. 컴포넌트끼리는 가까울수록 같은 파일에 둬도 되고, 파일이 커지면 따로 분리해도 돼요.

주의할 점이 하나 있어요. 다른 컴포넌트의 정의를 그 안에 중첩해 두면 안 됩니다. 렌더링할 때마다 새 함수가 다시 만들어져서 상태가 초기화되는 문제가 생겨요. 자식이 부모의 데이터가 필요하면 정의를 겹치기보다 prop으로 내려주는 게 맞아요.

export default function Gallery() {
  // 🔴 컴포넌트 안에 컴포넌트를 정의하지 마세요
  function Profile() {
    // ...
  }
  // ...
}

React 앱에서는 화면의 모든 조각이 결국 컴포넌트이고, 모든 컴포넌트는 이름이 대문자로 시작하는 일반 함수이며 JSX를 반환한다는 원칙 하나로 정리돼요.

더 알아보기