React

React와 첫 컴포넌트

React는 컴포넌트라는 작은 화면 조각을 조합하는 라이브러리입니다.

이럴 때 필요해요

페이지 전체를 한 번에 다루기 전에 재사용할 제목 조각을 만듭니다.

버튼이나 공연 카드처럼 화면의 일부를 하나의 단위로 만들 수 있습니다. React에서는 이런 단위를 컴포넌트라고 부릅니다. 화면 전체도 작은 컴포넌트를 조합해 만듭니다.

함수 컴포넌트는 화면의 모습을 나타내는 JSX를 반환하는 JavaScript 함수입니다. 직접 만든 컴포넌트 이름은 대문자로 시작합니다. 아래 ConcertTitle은 제목을 반환합니다.

이 예제는 React와 JSX 실행 환경의 App.jsx 파일에 넣는 코드입니다. 콘솔에 그대로 붙여 넣는 JavaScript 문법은 아닙니다. 먼저 한 컴포넌트를 표시하고 나중에 데이터와 상태를 더합니다.

동작을 설명하는 읽기 전용 예제입니다.

example.jsx

function ConcertTitle() {
  return <h1>주말 공연</h1>;
}
export default function App() {
  return <ConcertTitle />;
}

jsx · 읽기 전용6줄

App 안에 ConcertTitle을 배치하면 주말 공연 제목을 표시합니다.

ConcertTitle을 다른 화면에서 다시 사용할 수 있을까요?

생각할 단서 같은 컴포넌트를 JSX에서 한 번 더 배치해 보세요.

예시 답변 확인

네. 필요한 곳에서 <ConcertTitle />을 배치해 같은 화면 조각을 사용할 수 있습니다. 다른 파일이라면 export와 import로 연결합니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.