Props - 함수형 방식

아래 내용은 노마드코더님의 강의에서 배운 내용을 기반으로 작성하셨습니다.

앞선 글에서는 Class, 즉 객체에서 props를 사용하는 방식을 다뤄보았습니다. 따라서 this.props를 통해 객체 자기자신에게 온 props를 확인할 수 있었습니다. 그렇다면, this를 사용하지 못하는 함수형 프로그래밍 방식에서는 어떻게 해야할까요?

function Btn(props) {
    console.log(props);
    return();
}
function App() {
    return(
        <Btn banana="banana" melon="melon" />
    )
}

위와 같이 하위 컴포넌트가 될 함수의 첫번째 인자가 props로 정의되어 있습니다. App()에서 Btn()에 banana와 melon이라는 props를 정의하면 Btn()의 props인자를 통해 객체가능합니다.
console.log를 찍어보면 아래와 같은 결과가 나옵니다.

더 간단하게, props 객체 내부에 있는 속성들을 바로 꺼내서 변수선언까지 완료하고 싶다면

function Btn({banana, melon}) {
    console.log(banana);
    console.log(melon);
}

와 같은 방식으로도 사용이 가능합니다.