TypeScript+React의 함수 컴포넌트와 클래스 컴포넌트

16932 단어 React TypeScript

지난 번까지의 상태

다른 파일의 함수 구성 요소를 호출했습니다.

이번 목적

클래스 컴포넌트와 함수 컴포넌트에 대해 학습한다.

구성 요소 정보

React에서 사용할 수 있는 컴포넌트에는 다음의 2종류 기술 방법이 있다.

함수 구성 요소

클래스 컴포넌트

둘 다 이름에서 알 수 있듯이 함수 컴포넌트는 함수를 쓰는 방법이고 클래스 컴포넌트는 클래스를 쓰는 법으로 설명됩니다.

함수 컴포넌트

절차

마지막으로 app.tsx에서 만든 PrintHelloWorld는 함수 구성 요소입니다.

const PrintHelloWorld =()=> {
    return (
        <h1>Hello, world!</h1>
    );
}

함수이므로 입력을 받을 수 있습니다.
app.tsx의 PrintHelloWorld를 다음과 같이 변경한다.

//変更開始
const PrintHello = ({ name }:{name:string}) => {
//変更終了
    return (
        //変更開始
        <h1>Hello, {name}!</h1>
        //変更終了
    );
}
//変更開始
export { PrintHello };
//変更終了

index.tsx를 다음과 같이 변경한다.

import React from 'react';
import ReactDOM from 'react-dom';
//変更開始
import {PrintHello} from './app';
//変更終了

ReactDOM.render(  
  <React.StrictMode>
    {/* 変更開始 */}
    <PrintHello name='Taro'/>
    {/* 変更終了 */}
  </React.StrictMode>,
  document.getElementById('root')
);

프로그램 실행 후, 아래와 같이 "Hello, Taro!"라고 표시되면 성공.

해설

app.tsx

const PrintHello = ({ name }:{name:string}) => {}

함수 컴포넌트에서 입력을 취하도록 변경하고 있다.
React 구성 요소의 입력은 일반적으로 "props"라고합니다.
함수 머리의 괄호 안은 {인수 변수명}:{인수 변수명:형}이 된다.
또, 변수로 안녕하세요 상대가 바뀌므로 컴퍼넌트명을 "PrintHello"로 변경하고 있다.

<h1>Hello, {name}!</h1>

변수를 사용한 문장을 돌려주도록 변경하고 있다.

export { PrintHello };

구성 요소 이름을 변경했기 때문에 export 문을 변경했습니다.

import {PrintHello} from './app';

구성 요소 이름을 변경했기 때문에 import 문 변경.

<PrintHello name='Taro'/>

컴퍼넌트에 name='Taro'를 인수로서 건네주고 있다. 설명 방법은 <함수 구성 요소 이름 인수 이름 = 내용/>입니다.

인수를 여러 개로 설정하려면

app.tsx의 PrintHello를 다음과 같이 변경한다.

const PrintHello = ({ name, name2 }: { name: string, name2: string}) => {
    return (
        <h1>Hello, {name},{name2}!</h1>
    );
}

또 index.tsx의 PrintHelloWorld를 이하와 같이 변경하면, 인수가 2개의 함수 컴퍼넌트를 선언, 사용할 수 있다.

<PrintHello name='Taro' name2='Jiro'/>

클래스 컴포넌트

절차

app.tsx에 이하 Now 클래스 컴퍼넌트를 추가한다. (PrintHello 컴퍼넌트는 인수가 2개의 경우의 것으로 변경하고 있다)

//追加開始
import React from 'react';
//追加終了

const PrintHello = ({ name, name2 }: { name: string, name2: string }) => {
    return (
        <h1>Hello, {name},{name2}!</h1>
    );
}
export { PrintHello };

//追加開始
class Now extends React.Component {
    constructor(props: any) {
        super(props);
        this.state = new Date();
    }

    render() {
        return (
            <div>
                <h2>{String(this.state)}</h2>
            </div>
        )
    }
}

export { Now };
//追加終了

index.tsx는 다음과 같이 변경한다.

import React from 'react';
import ReactDOM from 'react-dom';
import {PrintHello} from './app';
//追加開始
import {Now} from './app';
//追加終了

ReactDOM.render(
  <React.StrictMode>
    <PrintHello name='Taro' name2='Jiro'/>
    {/* 追加開始 */}
    <Now />
    {/* 追加終了 */}
  </React.StrictMode>,
  document.getElementById('root')
);

아래와 같이 현재 일시가 추가로 표시되면 성공.

해설

app.tsx

import React from 'react';

클래스 컴퍼넌트는, React.Component 클래스를 상속해 작성하기 위해(때문에), react 를 임포트 한다.

//追加開始
class Now extends React.Component {
    constructor(props: any) {
        super(props);
        this.state = new Date();
    }

    render() {
        return (
            <div>
                <h2>{String(this.state)}</h2>
            </div>
        )
    }
}

export { Now };
//追加終了

클래스 컴포넌트. 일반 클래스와 마찬가지로 생성자를 만들 수 있습니다. 함수 구성 요소와 마찬가지로 props (입력)를 처리 할 수 있습니다.
클래스 컴퍼넌트는 함수 컴퍼넌트와 달리, 이 Now 클래스에서는 생성자로 state에 현재 일시를 격납하고 있다.
그리기 내용은 render 함수를 사용하여 반환합니다.