React에서 컴포넌트 사용하기

각 연결된 컴포넌트에는 해당하는 JSX 태그가 있습니다. 예를 들어, 우리에게 Product라는 컴포넌트가 있다면, 그것은 다음 태그에 해당합니다:

<Product />

컴포넌트 태그 이름은 반드시 대문자로 작성해야 합니다. 그래야 React가 컴포넌트 호출과 HTML 태그 사용을 구분할 수 있습니다.

자, 이제 App 컴포넌트 내부에서 Product 컴포넌트를 사용해 보겠습니다. 해당 태그를 작성하면 됩니다:

import React from 'react';
import Product from './Product';

function App() {
	return <div>
		<Product />
	</div>;
}

export default App;

렌더링 결과는 다음과 같을 것입니다:

<div>
	<p>
		product
	</p>
</div>

사용자 데이터를 출력하는 User 컴포넌트를 만드세요. 지금은 이 컴포넌트가 단순히 어떤 텍스트를 출력하도록 하세요. App 컴포넌트 내에서 이 컴포넌트를 사용하세요.