Props

JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있다. 리액트에서 컴포넌트에 지정한 속성들을 Props라고 부른다.

Props는 Properties 의 약자이며 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달된다.

// App.js 상위

import Dice from './Dice';

function App() {
  return (
    <div>
      <Dice color="blue" />
    </div>
  );
}

export default App;

// Dice.js 하위

import diceBlue01 from './assets/dice-blue-1.svg';

function Dice(props) {
  console.log(props)
  return <img src={diceBlue01} alt="주사위" />;
}

export default Dice;

App 함수에서 사용하는 Dice 컴포넌트에 color 라는 속성을 blue 로 지정해주고 Dice 함수 내부에서 props 라는 파라미터를 하나 만들어 출력해보면 브라우저 콘솔에 다음과 같이 출력된다.

{ color : "blue" }

객체 형식으로 출력되며 컴포넌트를 활용할 때 속성값을 다양하게 전달하고 props 값을 활용하면, 똑같은 컴포넌트라도 전달된 속성값에 따라 서로 다른 모습을 그려낼 수 있게된다.

props 가 객체 형태를 띄고 있어 Destructuring 문법을 활용하여 조금 더 간결하게 코드를 작성할 수 있게된다.

function Dice({ color = 'blue', num = 1 }) {
  const src = DICE_IMAGES[color][num - 1];
  const alt = `${color} ${num}`;
  return <img src={src} alt={alt} />;
}

위처럼 color , num 과 같은 형태로 prop 을 나눈뒤 {} 감싸서 사용하면 된다. 기본값을 지정해줄 수도 있다.

Children

props 에는 children 이라는 prop 이 존재한다.

JSX 문법으로 컴포넌트를 작성할 때 컴포넌트를 단일 태그가 아니라 여는 태그와 닫는 태그의 형태로 작성하면 그 안에 작성된 코드가 바로 children 값에 담기게 된다.

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>
        // <Button text = '던지기' /> 속성 값을 사용하지 않고도 prop의 값을 사용할 수 있다.
        // <Button text = '던지기' />
      </div>
      <Dice color="red" num={2} />
    </div>
  );
}

export default App;