Props란 무엇인가요?

컴포넌트를 재사용하는 것은 좋지만, 똑같은 별 3개는 유용성에 한계가 있습니다. Props를 사용하면 컴포넌트에 데이터를 전달할 수 있어 각 복사본을 서로 다르게 만들 수 있습니다:

function Greeting({ name }) {
    return <p>Hello, {name}!</p>;
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Alan" />
        </div>
    );
}

여기서 두 가지 일이 일어납니다:

• 전달: props는 속성처럼 보입니다: name="Ada"
• 수신: 컴포넌트는 매개변수 목록({ name })에서 이를 언팩하고 다른 변수와 마찬가지로 JSX 내부에서 사용합니다

동일한 컴포넌트, 다른 데이터, 다른 출력: Hello, Ada! 및 Hello, Alan!. 프롭스(Props)는 부모가 자식을 설정하는 방법입니다.