[TypeScript] Props 방식

1. Props로 데이터 전달

• 리액트에서는 컴포넌트에 데이터를 전달할 때, props로 key-value 형식으로 전달
• CourseGoal에서 title, description을 사용하기 위해 interface를 이용하여 타입 정의

// App.tsx
...
<CourseGoal title="title" description="description"/>

// Children.tsx
interface CourseGoalProps {
	title: string;
    description: string;
}

export default CourseGoal({title, description} : CourseGoalProps) {
	return (
    	<div>
        	<h1>{title}</h1>
            <p>{description}</p>
        </div>
    )
}

2. Children Props전달

• Props로 전달되는 children은 특정 key-value값이 아니라 컴포넌트의 태그 내부에 포함된 내용을 의미
• React에서 children의 타입을 정의하려면 ReactNode를 사용

// App.tsx
<CourseGoal title="title>
	<p>learn react with typescript</p>
</CourseGoal>

// CourseGoal.tsx
import { ReactNode } from "react";

interface CourseGoalProps {
	title: string;
    children: ReactNode
}

export default CourseGoal({title, description} : CourseGoalProps) {
	return (
    	<div>
        	<h1>{title}</h1>
            <p>{description}</p>
        </div>
    )
}

3. ReactNode

• 리액트에서 사용할 수 있는 모든 유효한 JSX 요소의 타입을 포함한 타입

• 포함하는 타입

  • HTML태그 : div, p
  • 리액트 컴포넌트 : <MyComponent/>
  • 문자열
  • 숫자
  • null 또는 undefined

  4. PropsWithChildren

• PropsWithChildren은 컴포넌트에 children속성을 자동으로 추가하고 타입을 ReactNode로 정의

  import {PropsWithChildren} from "react"
  
  type CourseGoalProps = PropsWithChildren<{
  	title: string;
  }>
  
  ...