[React, TypeScript] - props 작업

 

function Todos (props) {
  return(
  <ul>
    
  </ul>
  );
}

• 여기 있는 상수 Todos가 리액트 함수 컴포넌트를 가지고 있음.
• 상수 Todos에 타입 지정.
• react에서 React 가져오기.
• '.FC' 추가. (리액트 패키지'@types/react'에 정의된 타입) => 이 자체가 제네릭 타입

리액트 패키지에 내장된 타입 정의.

이 함수가 함수형 컴포넌트로 동작함을 명시.

 

import React from 'react';

const Todos: React.FC = (props) => {
  return(
  <ul>
    
  </ul>
  );
}

 

 

• React.FC에 정의된 타입 T.
• 제네릭 타입을 사용해 FC라는 제네릭 타입의 용도에 맞게 사용할 하나의 타입을 명시적으로 설정.
• FC은 제네릭 타입. 여기에 집어넣을 값은 우리가 만든 props 객체. (이 함수형 컴포넌트에 맞게 props를 정의한 객체)
• FC 타입의 기능은 여기에 어떤 객체타입을 정의하든 객체의 기본타입, children 프로퍼티와 합쳐주는 기능.
• 리액트와 타입스크립트로 함수형 컴포넌트를 만들려면 React.FC타입을 함수형 컴포넌트의 상수 옆에 사용.
• 그 다음 <> 붙이고 그 괄호 사이에 필요한 형태의 props를 정의. 프로퍼티 객체의 타입.

import Todos from './components/Todos';

function App() {
  return (
    <div>
      <Todos />
    </div>
  );
}

<>로 우리가 정의한 프로퍼티를 기존 props와 합칠 수 있음.