My Study/React
[React, TypeScript] - props 작업
handbefore
2024. 10. 14. 16:42
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와 합칠 수 있음.