React JS에서 확장

상속은 객체 지향 아키텍처의 필수 개념입니다. React JS에서는 주로 상속을 사용하여 React.Component에 액세스하여 UI를 빌드합니다.

예를 들어 우리는 주로 class ClassA extends React.Component를 사용하는데, 이는 ClassA가 React.Component의 요소에 액세스할 수 있음을 의미합니다.

이 기사에서는 React JS의 extends 키워드에 대해 설명합니다. 또한 주제를 더 쉽게 만들기 위해 설명과 함께 예를 살펴보겠습니다.

React JS에서 extends 키워드 사용

아래 예제에서는 React JS의 상속에 관한 간단한 예제에 대해 설명합니다. 먼저 아래 예제 코드를 살펴보십시오.

import React from 'react';

class ClassA extends React.Component {
  render() {
    return <h2>I am from ClassA<
               /h2>;
  }
}

class ClassB extends React.Component {
  render() {
    return (
      <div>
      <h1>I am from ClassB</h1>
        <ClassA />< /div>
    );
  }
}
  export default ClassB;

위의 예에서 extends 키워드는 React.Component의 구성 요소에 액세스하는 데 사용됩니다.

클래스 간 참조의 경우 아래의 일반 구문을 사용합니다.

<ClassName />

클래스의 기본 내보내기에 액세스합니다. 클래스 내에 더 많은 요소가 있는 경우 다음과 같이 가져올 수 있습니다.

import {element1, element2, ...} from './YourClass';

그러면 아래와 같이 쉽게 액세스할 수 있습니다.

<element1 />

이제 모든 파일을 완료하면 브라우저에 아래와 같은 출력이 표시됩니다.

React 구성 요소의 상속에 관한 또 다른 예를 살펴보겠습니다. 여기서는 다른 클래스에서 직접 구성 요소를 확장하는 방법을 보여줍니다.

import React from 'react';

class Class_Parent extends React.Component {
  constructor(props) {
    super(props);
    this.Parent_Class_Function = this.Parent_Class_Function.bind(this);
  }

  // Function of Parent Class.
  Parent_Class_Function() {
    console.log('This is a parent class method.');
  }

  render() {
    return false;
  }
}

export default class Class_Child extends Class_Parent {
  constructor() {
    super();
  }
  render() {
    this.Parent_Class_Function();
    return false;
  }
}

위의 예는 React JS의 다른 클래스에서 구성 요소를 확장하는 방법을 보여줍니다.

위의 함수에서 Parent_Class_Function() 함수를 사용하여 Class_Parent라는 클래스를 만들었습니다. 그 후 다음 줄을 통해 Class_Parent를 확장하는 또 다른 클래스를 생성했습니다.

export default class Class_Child extends Class_Parent

이제 상위 함수 Parent_Class_Function()에 쉽게 액세스할 수 있습니다.

이제 위의 예를 실행하면 웹 콘솔에 아래와 같은 출력이 표시됩니다.

This is a parent class method.

이 튜토리얼은 react-select 패키지를 사용하므로 애플리케이션을 실행하기 전에 이 패키지를 설치해야 합니다. npm을 사용하여 쉽게 설치할 수 있습니다.

이 글에서 공유하는 예제 코드는 React JS 프로젝트로 작성되었습니다. React 프로젝트를 실행하려면 시스템에 최신 Node JS 버전이 설치되어 있어야 합니다.

시스템에 Node JS가 없으면 먼저 설치하십시오.