📌 prop 전달 받기

Props는 Properties의 약자인데요, 컴포넌트에 지정한 속성들을 Props라고 부릅니다
문자열을 porp으로 전달할 경우에는 {}를 사용하지 않고 ""를 사용합니다.
Destructuring 문법을 활용해서 조금 더 간결하게 코드를 작성할 수 있습니다.

✨ 실습으로 props 적용해보기

1. HandIcon 컴포넌트의 value라는 prop을 받을거에요
2. img의 src속성은 value의 값에 따라 다음과 같이 지정해 주세요

• 'rock' 인 경우 rockImg 를 보여줍니다.
• 'scissor' 인 경우 scissorImg 를 보여줍니다.
• 'paper' 인 경우 paperImg 를 보여줍니다.

1. 객체화 하기

이미지 객체화

const IMAGES = {
  rock: rockImg,
  scissor: scissorImg,
  paper: paperImg
}

전체 코드

import rockImg from './assets/rock.svg';
import scissorImg from './assets/scissor.svg';
import paperImg from './assets/paper.svg';

// 이미지 주소 객체화
const IMAGES = {
  rock: rockImg,
  scissor: scissorImg,
  paper: paperImg
}

function HandIcon ({value}) {
  const src = IMAGES[value]
  return <img src={src} alt={src} />
}

export default HandIcon;

2. 삼항으로 조건달기

내가 푼 방법

value === 'rock' ? rockImg : value === 'scissor' ? scissorImg : paperImg

전체 코드

import rockImg from './assets/rock.svg';
import scissorImg from './assets/scissor.svg';
import paperImg from './assets/paper.svg';

function HandIcon({value}) {
  const imgUrl = value === 'rock' ? rockImg : value === 'scissor'? scissorImg : paperImg
  return <img src={imgUrl} alt={imgUrl} />;
}

export default HandIcon;

---

📌 children prop

props에는 children이라는 조금 특별한 프로퍼티(prop, 프롭)가 있습니다.
컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면, 그 안에 작성된 코드가 바로 이 children 값에 담기게 됩니다.

✨ 실습으로 props 적용해보기

function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;

import Button from './Button';
import Dice from './Dice';

function App() {
  return (
    <div>
      <div>
        <Button>던지기</Button>
        <Button>처음부터</Button>
      </div>
      <Dice color="red" num={2} />
    </div>
  );
}

export default App;