Props

• props = properties의 줄임말로 컴포넌트 속성을 설정할 때 사용하는 요소.
• props의 값은 부모 컨포넌트에서 설정한다.
• props는 자식 컨포넌트에게 string, number, function 등 모든 것을 전달할 수 있다.
• props는 jsx 내부에서 {}로 감싸주어 사용한다.

props로 자식컨포넌트에게 값 전달하기

[부모 컨포넌트]

import React from "react";
import CardList from "./Components/CardList/CardList";

function Monsters() {
return (
    <div className="component">
      <CardList cardName="토끼" />
    </div>
  )
}

[자식 컨포넌트]

function CardList(props) {
  //props에서 무엇을 받아오는지 알고 싶다면 console.log()를 사용해보자!
  return <div> 내 이름은 {props.cardName}입니다.</div>
}

// 내 이름은 토끼입니다.

위와 같이 부모 컨퍼넌트에 포함된 자식 컨포넌트CardList에 cardName="토끼" props를 설정 해주어 CardList컨포넌트 내부에서 function CardList(props) props를 인자로 받아와서 사용할 수 있다.

비구조화 할당으로 props 내부 값 추출하기

[자식 컨포넌트]

function CardList(props) {
const [cardName] = props
  return <div> 내 이름은 {cardName}입니다.</div>
}

// 내 이름은 토끼입니다.

비구조화 할당을 사용해서 받아온 props를 더 간단하게 사용할 수 있다.
Tip : 아래와 같이 비구조화는 받아오는 인자 내부에서 바로 실행할 수 있다.

[자식 컨포넌트]

function CardList({cardName}) {
  return <div> 내 이름은 {cardName}입니다.</div>
}

// 내 이름은 토끼입니다.