3.2 Typing the Props

Typescript

component에 필요한 prop이 제대로 있는지
코드 실행 전에 에러 확인 가능

Prop Types (react.js)

코드 실행 후 브라우저에서 에러 확인 가능

interface 사용 전

const x = (a: number, b: number) => a+b

interface

shape of an object

interface ContainerProps {
	bgColor: string;
}

interface CircleProps {
	bgColor: string;
}

Object (using spread 문법)

Circle에서 Container로 props 두번째 보냄

const Container = styled.div<ContainerProps>`
	width: 200px;
    height: 200px; 
    border-radius: 100px; // 고정
    background-color: {$(props) => props.bgColor}; // 이 속성을 알게 해줌
`;

function Circle({bgColor}: CircleProps) {
	return <Container bgColor={bgColor} />;
}

App.js

App에서 Circle로 props 첫번째 보냄.

function App() {
	return (
    <div>
    	<Circle bgColor="teal" />
        <Circle bgColor="tomato" />
    </div>
    );
}