react 초초보자용.
현장에서 React v16.8의 FunctionComponent형(앞으로 FC라고 부른다)을 사용할 기회가 있기 때문에 필기 정도의 기초를 정리했다.
잘못된 점이 있으면 지적해 주세요!!
초간단 구성 파일을 표시하는 구성 요소를 사용하여 요약합니다.

총체적

import React from 'react'

interface PersonProps {
  name: string,
  age?: number,
  agree?: Function,
}

const Person: React.FC<PersonProps> = props => {
  const {
    name,
    age,
  } = props

  const agree = () => {
    console.log(`${name}は${age}才です`)
  }

  return (
    <React.Fragment>
      <span>name : {name}</span><br />
      <span>age : {age}</span><br />
      <button onClick={agree}>agree</button>
    </React.Fragment>
  );
}

export default Person

순서대로 설명하다.

가져오는 데 필요한 모듈

읽기만 하면 되므로 가져오기 읽기.

import React from 'react'

속성 및 연결 정의

interface ParsonProps {
  name: string,
  age?: number,
}

인터페이스를 사용하여 속성과 리조또의 종류를 정의합니다.
큰 장면을 렌더링하는 동안 이 고장이 발견되었습니다.interface 名前에 사용된 유형입니다.
부모 레벨에서props를 통해 전달될 때, 여기에 기술된 형식 이외의 형식이거나 비어 있으면 TypeScript가 오류를 알려 줍니다.プロパティorメゾット: 型의?생략할 수 있다는 뜻입니다. 속성을 사용하지 않으면 undifinde를 추가합니다.
비어 있을 수 있는 속성은 메소드에게 씌워주면 돼.
인터페이스는 type에서도 대체적으로 같다고 합니다.
다른 사람이 알고 싶다TypeScript 인터페이스와 Type 비교
의 보도를 참고로 하여 꼭

어셈블리 생성

const Person: React.FC<PersonProps> = props => {
  const {
    name,
    age,
  } = props

  const agree = () => {
    console.log(`${name}は${age}才です`)
  }

  return (
    <React.Fragment>
      <span>name : {name}</span><br />
      <span>age : {age}</span><br />
      <button onClick={agree}>agree</button>
    </React.Fragment>
  );
}

따로따로 보다.

사용자 구성 요소 생성 선언

const Person: React.FC<PersonProps> = props => {}

형식은 ReactFC 형식을 사용하여Generix에 위에서 만든 인터페이스를 지정합니다.
Generix를 사용하면 인터페이스에 여러 개가 있고 유형이 있어도 요약해서 기술할 수 있습니다.
그리고 프로필을 매개 변수에 건네줍니다.
이것은 구성 요소에서 호출됩니다 age?: number.

props의 처리와 함수

const {
    name,
    age,
  } = props

  const agree = () => {
    console.log(`${name}は${age}才です`)
  }

구성 요소 props.xxx 에서 호출할 수 있습니다.
썼지만 프로스는 제가 분열해서 대입해서 사용할게요.
props의 내용을 각각name,age에 대입합니다.
이렇게,agree 함수를 보면, props.xxx 설명이 필요 없다는 것을 발견할 수 있습니다.
name,age,agree () 는 모두 인터페이스로 정의되어 있기 때문에 이 점을 사용할 수 있습니다.

render, 내보내기

return (
    <React.Fragment>
      <span>name : {name}</span><br />
      <span>age : {age}</span><br />
      <button onClick={agree}>agree</button>
    </React.Fragment>
  );
export default Person

과장된 곳은 여느 때와 같다.

부모님이 사용해 보세요.

import Person from '../Person'

<Person
  name="jon"
  age={12}
/>

부모 세대에서 사용할 때 주의해야 할 점은name,age에 규정된 형식 이외의 다른 형식이 있으면 오류가 발생합니다.
TypeScript의 기능이기도 합니다.
age는 선택할 수 있기 때문에 속성 설명이 없어도 오류가 발생하지 않습니다.

이런 느낌이 들어요. 버튼을 누르면 콘솔에게 "Jon이 12살이에요".

총결산

처음에 FC+TypeScript로 쓰는 걸 봤을 때 그게 좋겠다고 생각했는데 하나하나 배우면 세상이 달라져요.
나는 이곳이 프로그래밍하기에 좋은 곳이어서 매우 기쁘다.
읽어주셔서 감사합니다.
수정점과 개선점이 있다면 기다릴게요.