컴포넌트
컴포넌트(component)
React에서 컴포넌트란 자바스크립트 함수의 개념과 비슷하게 이해할 수 있습니다. React에서는 애플리케이션의 UI를 설계할 때 사용자가 볼 수 있는 화면을 여러 개의 컴포넌트로 나누어 구성함으로써 각각의 컴포넌트를 개별적으로 관리할 수 있습니다.
이러한 컴포넌트는 단순히 재사용이 가능한 템플릿의 역할 뿐만 아니라, 데이터(props)를 입력 받아 View의 상태에 따라 화면에 어떻게 표시되는지를 정의하는 React 엘리먼트를 반환합니다.
React 컴포넌트는 선언하는 방식에 따라 클래스 기반의 컴포넌트와 함수 기반의 컴포넌트로 구분할 수 있습니다.
클래스 컴포넌트와 함수 컴포넌트
우리가 지금까지 살펴본 App 컴포넌트는 function 키워드를 사용한 함수 컴포넌트입니다. 이처럼 컴포넌트를 정의하는 가장 간단한 방법은 자바스크립트 함수를 작성하는 것입니다.
함수 기반의 App 컴포넌트
export default function App() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
또한, class 키워드를 사용하여 클래스 기반의 컴포넌트를 정의할 수도 있습니다.
클래스 컴포넌트는 Component 클래스를 상속해야 하며, render() 메서드를 반드시 구현해야 합니다. 그리고 render() 메서드를 통해 화면에 보여주어야 할 JSX 표현식(expression)을 반환하면 됩니다.
클래스 기반의 App 컴포넌트
import React from "react";
export default class App extends React.Component {
render() {
return <h1>Hello, World!</h1>;
}
}
React에서 이 두 가지 유형의 컴포넌트는 기능적으로 완전히 동일하게 동작합니다. 단지 클래스 컴포넌트는 state 기능과 생명 주기 메소드를 사용할 수 있지만, 함수 컴포넌트에서는 해당 기능들을 사용할 수 없다는 차이점만 있었습니다.
하지만 함수 컴포넌트는 클래스 컴포넌트보다 선언하는 방법이 훨씬 간결하고, 메모리의 소비 또한 적다는 장점을 가집니다. 그리고 state 기능과 생명 주기 메소드의 사용이 불가능하다는 단점 또한 React v16.8부터 새롭게 추가된 Hook을 사용함으로써 더 이상 문제가 되지 않게 되었습니다.
React 공식 문서에서는 클래스 컴포넌트보다는 함수 컴포넌트와 Hook의 사용을 권장하고 있습니다.
컴포넌트의 생성
새로운 컴포넌트를 생성하기 위해 우선 React 프로젝트의 src 폴더에 Greeting.js 파일을 생성합니다.
React에서 컴포넌트를 생성할 때는 반드시 컴포넌트의 이름을 대문자로 시작하도록 작성해야 합니다. React는 소문자로 시작하는 이름의 컴포넌트를 <h1>이나 <div>와 같은 정규 HTML 태그로 취급하기 때문입니다.
소문자로 시작하는 내장 컴포넌트는 ‘h1’이나 ‘div’ 같은 문자열 형태로 React.createElement() 메소드에 전달되지만, <Greeting />과 같이 대문자로 시작되는 사용자 정의 컴포넌트는 React.createElement(Greeting)의 형태로 컴파일 되어 자바스크립트 파일에서 사용자가 직접 정의했거나 import를 통해 가져온 컴포넌트를 가리키게 됩니다.
방금 생성한 Greeting.js 파일을 열고, 아래와 같이 Greeting 컴포넌트를 작성합니다.
Greeting.js
function Greeting() {
return (
<>
<h1>React Component</h1>
<p>나의 첫 React 컴포넌트!</p>
</>
);
}
export default Greeting;
다음으로 App.js 파일을 열고, 코드를 아래와 같이 변경합니다.
예제(App.js)
import Greeting from "./Greeting";
function App() {
return <Greeting />;
}
export default App;
이제 우리는 Greeting이라는 새로운 컴포넌트를 생성하고, App 컴포넌트에서 이를 활용해 보았습니다.
이러한 사용자 정의 컴포넌트를 사용하는 이유는 React.createElement() 메소드의 호출이나 JSX 구문으로 생성하는 Virtual DOM의 생성 코드를 사용자 정의 컴포넌트 쪽으로 이동시킴으로써 코드를 간결하게 만드는 데 그 목적이 있습니다.
