3.4.1 props 객체란

props(properties)는 컴포넌트를 마치 HTML 태그처럼 사용해 값을 속성 형태로 전달합니다. 예를 들어, App 컴포넌트에서 User 컴포넌트로 ‘철수’라는 데이터를 전달하려면 다음과 같이 코드를 작성합니다.

src/App.tsx

import User from './components/User';

export default function App() {
  return <User name='철수' />;
}

코드에서 <User name='철수' />는 User 컴포넌트를 화면에 렌더링하면서 name이라는 속성의 값으로 '철수'를 함께 전달합니다.

여러 데이터를 전달하고 싶다면 속성을 여러 개 추가하면 됩니다. 다음 예제에서는 name='철수'와 age={20}이라는 두 가지 속성을 User 컴포넌트로 전달합니다. 이때 문자열은 따옴표(" 또는 ')로, 숫자나 표현식은 중괄호({})로 감싸 전달합니다.