3.4.4 props와 전개 연산자

현재 App 컴포넌트의 코드는 다음과 같습니다.

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={userObj} clickHandler={clickHandler} />;
}

여기서는 userObj 객체를 props로 전달할 때 userObj 전체를 하나의 속성으로 설정해 전달합니다. 따라서 User 컴포넌트에서는 props.userObj로 객체 전체에 접근할 수 있습니다.

만약 userObj 객체의 속성을 각각 전달하고 싶다면, 전개 연산자(...)를 사용할 수 있습니다. 전개 연산자(spread operator)는 객체의 속성을 풀어 해당 위치에 하나하나 나열해주는 역할을 합니다.