[React] props.children 값 동작

React의 props입니다.나는 children에 값을 넣을 때의 행동이 마음에 들어서 해 보았다.
먼저 결론을 내리다.하위 요소가 있을 때props입니다.children에 하위 요소를 삽입하지만 하위 요소가 없으면 자유롭게 사용할 수 있습니다.

환경

    "react": "^16.13.1"
    "react-dom": "^16.13.1"

전제 지식

React에서 props.children은 하위 요소의 값을 저장하는 예약 후입니다.

const WithPizza = (props) => <div>{props.children}🍕</div>

ReactDOM.render(
    <WithPizza>Hello World</WithPizza>,
    document.getElementById('root')
)

// => Hello World🍕

React 용어집 – React

children 속성에 값 추가 시도

실험적으로children 특성이 값에 들어갔을 때의 행동이 어떻게 되는지 봅시다.
다음은 모두 4건으로 각각 확인됐다.

서브 요소 포함/없음

children 속성이 있음/없음

const Wrap = ({ children, text }) => (
  <div>
    <h2>{text}</h2>
    <li>children: {children}</li>
  </div>
);

function App() {
  const Case1 = <Wrap text="CASE1" />
  const Case2 = <Wrap text="CASE2"><span>🍎</span></Wrap>
  const Case3 = <Wrap text="CASE3" children="🐠" />
  const Case4 = <Wrap text="CASE4" children="🐠"><span>🍎</span></Wrap>

  return (
    <div>
      {Case1}
      {Case2}
      {Case3}
      {Case4}
    </div>
  );
}

이 결과는 아래와 같다.

Case1~Case2는 일반적인 행위입니다.Case3~Case4는 위화감은 없지만 왜 그런지 더 정확히 알고 싶어요.

기록을 해보도록 하겠습니다.

<Wrap /> 등 JSX는 React.createElement의 문법당이다.
여기에서 React.createElement 생성된 대상의props 특성을 기록하고 확인합니다.

function App() {
  // ...

  const Case1 = <Wrap text="CASE1" />
  console.log('Case1', Case1.props.children)
  // => undeifned

  const Case2 = <Wrap text="CASE2"><span>🍎</span></Wrap>
  console.log('Case2', Case2.props.children)
  // => { type: "span", props: { children: "🍎" }, ... }
　// ReactElementですね

  const Case3 = <Wrap text="CASE3" children="🐠" />
  console.log('Case3', Case3.props.children)
  // => 🐠

  const Case4 = <Wrap text="CASE4" children="🐠"><span>🍎</span></Wrap>
  console.log('Case4', Case4.props.children)
  // => { type: "span", props: { children: "🍎" }, ... }
　// ReactElementですね

  // ...
}

Case3와 Case4를 사용하면 이해하기 쉽습니다.
Case3에서 children 속성에 포함된 문자열은 Case4에서 이불 요소로 대체됩니다.

결론

하위 원소가 존재할 때props.하위 요소 삽입children

하위 원소가 없을 때props.임의로children을 사용할 수 있음

말도 그렇지만 구린내 나는 벌레의 온상props다.children은 예약 후이기 때문에 하위 요소를 제외하고는 사용하지 마세요