[React] 컴포넌트 생성하기

현채은·2024년 4월 17일

컴포넌트 만들기

React 앱은 컴포넌트로 구성됩니다. 컴포넌트란 웹 페이지의 한 부분을 나타내는 코드 블럭이며 재사용이 가능한 UI 요소입니다.

마치 레고 블록과 같아서, 여러분이 원하는 대로 조합하여 멋진 구조물을 만들 수 있습니다. React 컴포넌트도 각자의 역할과 모양이 있으며, 이를 조합함으로써 복잡한 사용자 인터페이스를 쉽고 효율적으로 구성할 수 있습니다.

다음 총 4단계에 걸쳐, 컴포넌트를 중첩해 볼까요?

1단계 : 컴포넌트 정의하기

사용하고 싶은 컴포넌트를 원하는 마크업을 추가하여 작성합니다. (React 컴포넌트의 이름은 항상 대문자로 시작해야 합니다.)

export default function Introduce() {
	return (
	<>
		<p> 제 이름은 레오입니다. </p>
		<p> 만나서 반갑습니다! </p>
	</>
	);
}

2단계 : 컴포넌트 내보내기

export default 접두사를 사용하면 다른 파일에서 해당 컴포넌트를 가져올 수 있도록 해줍니다. 해당 컴포넌트를 내보낼 준비가 된 것이라고 말할 수 있습니다.

첫번째 방법

export default function Introduce() { 
	return (
		// JSX 코드
	);
}

두번째 방법

function Introduce() {
	return (
		//  JSX 코드
	);
}

export default Introduce;

3단계 : 컴포넌트 불러오기

import문을 사용하여 MyApp 컴포넌트에 Introduce 컴포넌트를 가져와 보겠습니다.

import Introduce from './Introduce';

export default function MyApp() {
	return (
		// JSX 코드
	);
}

4단계 : 컴포넌트 중첩하기

선언한 Introduce 컴포넌트를 MyApp 컴포넌트 안에 중첩해 보겠습니다.

import Introduce from './Introduce';

export default function MyApp() {
	return (
		<div>
			<h1> 여러분~! 환영합니다 </h1>
			<Introduce /> {/* Introduce 컴포넌트 중첩 */}
		</div>
	);
}

외부 소스로부터 컴포넌트를 사용하기 위해서는, import 구문을 통해 해당 컴포넌트를 프로젝트로 가져와야 합니다.

컴포넌트와 HTML 태그를 어떻게 구분하나요 ? 앞서 말씀드린 대로 HTML 태그는 소문자이고, 컴포넌트는 대문자로 시작하기 때문에 대소문자로 구분할 수 있습니다.

컴포넌트의 중첩 및 구성

컴포넌트는 일반 JavaScript 함수이므로 같은 파일에 여러 컴포넌트를 포함할 수 있습니다. 상단의 예제 코드를 보면 Introduce 컴포넌트가 한 번 중첩되어 있지만, 여러 번 반복하여 중첩할 수 있습니다.

import Introduce from './Introduce';

export default function MyApp() {
	return (
		<div>
			<h1> 여러분~! 환영합니다 </h1>
			<Introduce /> {/* Introduce 컴포넌트 중첩 */}
			<Introduce /> {/* Introduce 컴포넌트 중첩 */}
			<Introduce /> {/* Introduce 컴포넌트 중첩 */}
		</div>
	);
}