React 컴포넌트 소개

어떤 웹사이트든 살펴봅시다. 그것은 일련의 독립적인 블록들로 구성되어 있습니다: 헤더, 사이드바, 푸터, 콘텐츠 영역. 이러한 블록들이 React에서 의미하는 컴포넌트라고 말할 수 있습니다.

동일한 헤더를 보면, 그 안에서 로고 블록, 연락처 블록, 메뉴 블록 등을 구분할 수 있습니다. 즉, 컴포넌트는 다른 하위 컴포넌트들로 구성될 수 있습니다.

React에서도 상황은 유사합니다. - 웹사이트는 컴포넌트들의 집합으로 구성되며, 이 컴포넌트들은 다른 컴포넌트들을 포함할 수 있습니다.

React에서 각 컴포넌트는 별도의 모듈입니다. 일반적으로 개발은 주요 컴포넌트인 App로 시작하며, 이 컴포넌트가 나머지 컴포넌트들을 포함합니다.

새로운 컴포넌트를 만드는 연습을 해봅시다.

예를 들어, 상품 데이터를 출력하는 컴포넌트가 필요하다고 가정합시다. 이를 위해 작업 폴더에 Product.js 파일을 생성하고 다음 코드를 추가해야 합니다:

import React from 'react';

function Product() {
	return <p>
		product
	</p>;
}

export default Product;

보시다시피, 현재 우리 컴포넌트는 텍스트가 있는 문단을 반환합니다. 다음 강의들에서 우리는 상품 데이터가 반환되도록 이 코드를 개선할 것입니다. 하지만 지금은 시작으로 일부 초기 텍스트가 있는 문단을 그대로 두겠습니다.

이제 우리가 생성한 컴포넌트를 App 컴포넌트 안에서 출력해봅시다. 현재 우리의 App가 다음과 같은 코드를 가지고 있다고 가정합시다:

import React from 'react';

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

export default App;

먼저, 우리가 만든 상품 컴포넌트를 가져와야 합니다:

import React from 'react';
import Product from './Product'; // 상품 컴포넌트 가져오기

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

export default App;

이러한 가져오기 이후, App 컴포넌트 내부에서 Product 컴포넌트를 사용할 수 있습니다.