[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 /> 컴포넌트를 렌더링 할 수 있게 됩니다.