React 구성요소(클래스 기반 및 기능적)

React 구성 요소는 모든 React 애플리케이션의 구성 요소입니다. 이를 통해 UI를 별도로 관리하고 렌더링할 수 있는 독립적이고 재사용 가능한 부분으로 분할할 수 있습니다. React 구성 요소에는 기능 구성 요소와 클래스 구성 요소라는 두 가지 주요 유형이 있습니다.

기능적 구성 요소
기능적 구성 요소는 더 간단하며 JavaScript 함수로 작성됩니다. props(입력 데이터)를 인수로 사용하고 UI의 모양을 설명하는 JSX를 반환합니다. React 16.8부터 기능적 구성요소는 useState 및 useEffect와 같은 후크를 사용하여 상태 및 부작용도 처리할 수 있습니다.

import React, { useState } from 'react';

const Welcome = (props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1 id="Hello-props-name">Hello, {props.name}!</h1>
      <p>You've clicked {count} times</p>
      <button onclick="{()"> setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Welcome;

클래스 구성요소
클래스 컴포넌트는 React에서 컴포넌트를 작성하는 원래 방법이었습니다. 이는 React.Component 클래스를 확장하고 JSX를 반환하는 render() 메서드를 포함해야 합니다. 클래스 구성 요소는 componentDidMount, componentDidUpdate 및 componentWillUnmount와 같은 자체 상태 및 수명 주기 메서드를 가질 수 있습니다.

import React, { Component } from 'react';

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>
        <p>You've clicked {this.state.count} times</p>
        <button onclick="{this.handleClick}">Click me</button>
      </div>
    );
  }
}

export default Welcome;

주요 개념:

• JSX: HTML처럼 보이는 JavaScript의 구문 확장입니다. React 구성 요소는 JSX를 반환하여 UI를 설명합니다.
• Props: "properties"의 줄임말인 prop을 사용하면 상위 구성 요소에서 하위 구성 요소로 데이터를 전달할 수 있습니다.
• 상태: 구성 요소에서 렌더링되는 내용에 영향을 미치는 동적 데이터를 저장하기 위한 내장 개체입니다. 상태(기능 또는 클래스 구성 요소)를 사용하는 구성 요소만 이 데이터의 변경 사항에 따라 다시 렌더링할 수 있습니다.

후크(기능적 구성 요소용):

• useState: 기능 구성 요소의 상태를 관리할 수 있습니다.
• useEffect: 기능 구성 요소에서 부작용을 수행할 수 있습니다(예: 데이터 가져오기, DOM 업데이트).

React는 결합하여 더 큰 애플리케이션을 형성할 수 있는 작고 재사용 가능한 구성 요소의 생성을 장려하여 코드베이스를 모듈식으로 유지하고 유지 관리를 더 쉽게 만듭니다.

위 내용은 React 구성요소(클래스 기반 및 기능적)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!