src/App.tsx
import User from './components/User';
export default function App() {
const userObj = {
name: '철수',
age: 20,
};
const clickHandler = () => {
console.log('clicked');
};
return <User {...userObj} clickHandler={clickHandler} />;
}
이와 같이 작성하면 props에 name, age, clickHandler라는 3개 속성이 개별로 전달되는 효과가 있습니다.
return <User name='철수' age={20} clickHandler={clickHandler} />;
자식 컴포넌트에서는 userObj 객체의 속성들이 분리되어 전달되므로 더 이상 props.userObj로 접근할 수 없습니다. 따라서 개별 속성을 직접 props로 받도록 코드를 다음과 같이 수정해야 합니다.