React typeScript 사용 시 props type 지정

React를 typeScript와 같이 사용하는 경우 적용할 수 있는 방법으로,

자식 컴포넌트로 전달되는 props 타입을 간결하게 지정해줄 수 있다.

 

// Top.tsx
import { Bottom } from "../../~~"

export const Top = () => {
	return <Bottom 
        props1={props1} 
        props2={props2} 
        props3={props3} 
        props4={props4}
        />
}

// Bottom.tsx

interface childProps {
	props1: number;
    props2: string;
    props3: boolean;
    props4: () => void;
}

export const Bottom = ({
	props1,
    props2,
    props3,
    props4,
	}: childProps) => {
	
    
    return <span>bottom jsx</span>
}