React에서의 컴포넌트 기반 접근법 소개

우리에게 웹사이트가 있다고 가정해 봅시다. 이 웹사이트에서 우리는 일부 블록을 구분할 수 있습니다: 헤더, 콘텐츠, 사이드바, 푸터 등등. 각 블록은 더 작은 하위 블록으로 나눌 수 있습니다. 예를 들어 헤더에는 일반적으로 로고, 메뉴, 연락처 블록 등을 구분할 수 있습니다.

React에서 각각의 이러한 블록을 컴포넌트라고 부릅니다. 각 컴포넌트는 그 안에 더 작은 컴포넌트를 포함할 수 있고, 그 컴포넌트들은 다시 더 작은 컴포넌트들을 포함할 수 있으며, 이런 식으로 계속됩니다.

React의 각 컴포넌트는 src 폴더에 위치한 ES6 모듈에 대응됩니다. 모듈 파일의 이름은 대문자로 작성되며 해당 모듈 코드 안에 위치한 함수의 이름과 일치해야 합니다.

예를 들어, App.js라는 이름의 파일은 그 안에 App 함수를 포함해야 합니다:

import React from 'react';

function App() {
	// 컴포넌트 코드
}

export default App;

컴포넌트 중 하나는 기본 컴포넌트여야 합니다 - 즉, 다른 컴포넌트들이 추가되는 컴포넌트여야 합니다. React에서 기본적으로 그러한 컴포넌트는 App 컴포넌트가 됩니다. 이 컴포넌트에 다른 컴포넌트들이 연결될 것입니다. 이것이 어떻게 수행되는지 - 우리는 이후 튜토리얼에서 자세히 살펴볼 것입니다.