[React] Props, children

Props란?

JSX 문법에서 컴포넌트를 작성할 때, 컴포넌트에도 속성을 지정할 수 있습니다. React에서 이렇게 컴포넌트에 지정한 속성을 `Props`라고 부릅니다.

 

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

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

export default App;

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

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

export default Dice;

 

위 코드에서 App함수는 `Dice` 컴포넌트를 사용하면서 `color`라는 속성을 `blue`로 전달합니다. `Dice` 컴포넌트 내부에서 `props` 객체를 통해 이 속성을 접근할 수 있습니다.

{ color: 'blue' }

 

 위와 같이, `props` 객체는 `Dice` 컴포넌트로 전달된 모든 속성을 담고 있으며, 이를 통해 해당 속성 값에 접근할 수 있습니다.

---

Children

React에서 `children`은 컴포넌트의 자식 요소를 전달하는 `props`입니다. JSX 문법으로 컴포넌트를 작성할 때, 컴포넌트를 단일 태그가 아닌 여는 태그와 닫는 태그 형태로 작성하면, 그 안에 작성된 코드가 `children` 값에 담기게 됩니다.

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

export default Button;

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

function App() {
  return (
    <>
        <Button>던지기</Button>
        <Button>처음부터</Button>
    </>
  );
}

export default App;

 

위 코드에서 `Button` 컴포넌트는 `children`이라는 `props`를 받아서 버튼의 내용을 출력합니다. App.js에서 `Button` 컴포넌트를 호출할 때 버튼 안에 던지기와 처음부터라는 텍스트를 넣었고, 이 텍스트는 `Button` 컴포넌트 내에서 `children`을 통해 접근할 수 있습니다.

<Button>
  <Dice />
</Button>

 

이렇게 `children`을 활용하면, 단순히 텍스트뿐만 아니라 다른 컴포넌트나 복잡한 JSX 구조도 전달할 수 있습니다. 이 경우 `Button` 컴포넌트 안에서 `<Dice />` 컴포넌트를 렌더링 할 수 있게 됩니다.