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

{props.title}

{props.message}

); } export default MyComponent; ``` Class Component를 사용하는 예는 다음과 같습니다. ```js import React, { Component } from 'react'; class MyComponent extends Component { render() { return (

{this.props.title}

{this.props.message}

); } } export default MyComponent; ``` ## 결론 React 컴포넌트는 UI를 만들기 위한 중요한 개념입니다. 특히 Functional Component, Class Component, Pure Component의 차이를 이해하고 적절하게 사용할 중요합니다. 이 글을 통해 React 컴포넌트를 간략하게 소개해보았습니다.