React는 UI를 만들기 위한 자바스크립트 라이브러리로, 점진적인 UI 업데이트를 손쉽게 가능하게 해줍니다. React는 컴포넌트라는 개념을 중심으로 동작하기 때문에, 이를 잘 이해하고 사용하는 것이 중요합니다. 이 글에서는 React 컴포넌트에 대해 간단히 소개해보겠습니다.
React 컴포넌트는 React 어플리케이션에서 UI를 구성하는 기본 단위입니다. 컴포넌트는 작은 단위의 코드로 이루어져 있고, 각 컴포넌트는 각각의 기능을 가지고 있습니다.
React 컴포넌트는 다음과 같은 세 가지 종류가 있습니다.
Functional Component : 이 컴포넌트는 JavaScript 함수로 정의됩니다. 이 함수는 props를 받아서 UI를 렌더링하고, 각각의 렌더링된 엘리먼트를 반환합니다.
Class Component : 이 컴포넌트는 ES6 class로 정의됩니다. 이 클래스는 React.Component를 상속받고, 각각의 라이프 사이클 메소드를 사용합니다.
Pure Component : 이 컴포넌트는 React.PureComponent를 상속받아 구현합니다. 이 컴포넌트는 props가 변하지 않으면 렌더링하지 않아 더 빠른 속도로 작동합니다.
Functional Component를 사용하는 예는 다음과 같습니다.
import React from 'react';
const MyComponent = (props) => {
return (
<div>
<h1>{props.title}</h1>
<p>{props.message}</p>
</div>
);
}
export default MyComponent;
Class Component를 사용하는 예는 다음과 같습니다.
import React, { Component } from 'react';
class MyComponent extends Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.message}</p>
</div>
);
}
}
export default MyComponent;
React 컴포넌트는 UI를 만들기 위한 중요한 개념입니다. 특히 Functional Component, Class Component, Pure Component의 차이를 이해하고 적절하게 사용할 중요합니다. 이 글을 통해 React 컴포넌트를 간략하게 소개해보았습니다.