유명한 프론트엔드 프레임워크 중 하나인 React는 다양한 종류의 사용자 인터페이스를 구축하는 데 사용됩니다. JSX에서 구성 요소로 작업하는 동안 우리는 두 가지 유형의 구성 요소를 접하게 됩니다.

기능 구성 요소

클래스 구성요소

이 기사에서는 이러한 구성 요소가 어떻게 다른지 살펴볼 것입니다. 시작하자

클래스 또는 기능 구성 요소로 이동하기 전에 반응 구성 요소가 무엇인지 논의해 보겠습니다.

반응 구성 요소

구성 요소는 모든 디자인을 작은 조각으로 가져오기 위해 추가 구성 요소가 존재하는 코드 블록입니다. 이들은 재사용 가능한 코드 블록이며 독립적으로 사용하거나 가져올 수 있습니다.
구성 요소는 복잡한 UI 디자인을 구축하는 동안 모든 것을 단일 페이지에 넣는 것을 피하는 경향이 있으므로 중요한 역할을 합니다.

React에는 두 가지 유형의 구성 요소가 있습니다. 하나씩 살펴보겠습니다.

기능적 구성 요소 반응

Functional Component는 기본적으로 React JavaScript Xml 요소(JSX로 알려짐)를 반환하는 JavaScript 함수입니다.

이해를 돕기 위해 예를 들어보자

import React from "react";

const Welcome = props => (
  <div>
    <h1>Welcome🙌, {props.name}</h1>
  </div>
);

export default Welcome;

Functional Components에는 렌더링 방법이 없으며 주로 카드나 버튼과 같은 UI 프레젠테이션을 담당합니다. 구성 요소에 반응 상태가 필요한 경우 기능 구성 요소를 사용하는 것이 좋습니다.

React 클래스 구성 요소

클래스 구성 요소는 반응 라이브러리에서 구성 요소 클래스를 확장하는 일반 ES6 클래스입니다. HTML을 반환하려면 render() 메서드를 사용해야 합니다.
클래스 구성 요소에 소품을 전달하고 _this.props _로 액세스합니다.

class ClassComponent extends React.Component {
 render() {
   return <h1>Hello, world</h1>;
 }
}

구성 요소에 대한 몇 가지 소품을 전달하려는 경우:
<Component name = “Abhishek Kushwaha” />
FUNCTIONAL COMPONENT 의 경우 "props.name"구성을 사용하여 함수의 인수로 props를 전달합니다.

function FunctionalComponent(props) {
 return <h1>Hello, {props.name}</h1>;
}

클래스 구성 요소를 사용하여 이를 추가해야 합니다. 소품을 참조하십시오.

class ClassComponent extends React.Component {
render() {
 return <h1>Hello, {this.props.name}</h1>;
}

당신이 도움이 되었기를 바랍니다! 😀