값 전달(props)

핵심 포인트

• props는 컴포넌트에 전달하는 "주문서"입니다. HTML 속성과 같은 방식으로 씁니다
• 받는 쪽은 함수의 인수로 받습니다: function Greeting({ name }) { ... }
• 받은 props는 고치지 않습니다. 바꾸고 싶을 때는 전달하는 쪽에서 바꿉니다

직접 해 보기

function Greeting({ name }: { name: string }) {
  return <p>안녕하세요, {name} 님</p>
}

export default function App() {
  return (
    <div style={{ padding: 16 }}>
      <Greeting name="김민준" />
      <Greeting name="이서연" />
    </div>
  )
}

1. 세 번째 Greeting을 추가해 보세요
2. Greeting에 age(나이)도 전달해서 "N살"이라고 표시해 보세요 (힌트: { name, age })
3. name을 깜빡하고 전달하지 않으면 어떻게 되는지 확인해 보세요

자주 하는 실수