아래 내용은 노마드코더님의 강의에서 배운 내용을 기반으로 작성하셨습니다.
앞선 글에서는 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);
}
와 같은 방식으로도 사용이 가능합니다.