[TIL]React(3) - props.children

props.children 관련 예제를 풀다가 의문이 생겼다.
분명히 자식 컴포넌트 2개를 부모 컴포넌트안에 넣었는데 view에 왜 보이지 않을까?

• 부모 컴포넌트 Wrapper.js

import React from 'react';
//style속성을 가진 div엘리먼트를 반환하는 컴포넌트.
function Wrapper() {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>

    </div>
  )
}

export default Wrapper;

이를 App.js에 넣어서 자식 컴포넌트인 Hello들을 감싸고자 한다.

• App.js

import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}

export default App;

그러나 Hello 컴포넌트 안에 작성한 내용들이 보이지 않는다.
안의 component들의 인식을 할수없는걸까? 해서 개발자 도구를 확인해보니

    그림 01) 자식 컴포넌트의 값이 전달되지 않아 암것도 없는 view

children 속성안에 배열로 잘 들어가있는것은 확인할 수 있었다.
그렇다면, 내부의 내용이 DOM에 렌더링이 되지 않았다는 것일까?

이를 해결하려면, 부모 컴포넌트 Wrapper에서, props.children을 렌더링 해줘야 한다.
즉, props로 전달받은 Hello 컴포넌트를 내부에서 사용할 때에는 children으로 접근해줘야 하는것이다.

• children을 props로 받는 부모 컴포넌트 Wrapper.js

import React from 'react';

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}

export default Wrapper;

Wrapper.js에 props로 자식 컴포넌트의 값을 전달한 후 바뀐 뷰를 살펴보니 정상적으로 Hello 컴포넌트의 내용이 출력되어있는걸 확인했다. 물론 개발자도구의 component에도 자식 컴포넌트의 값이 전달된것을 확인했다.

    그림 02) 내용이 출력된 모습

props.children

: 컴포넌트 태그 사이에 넣은 모든 값(문자열, 자식 엘리먼트 등..)을 전달할 수 있다.
즉, 호출할 때에 여는 태그와 닫는 태그 사이에 포함된 내용을 표시하는데에 사용된다.

👉props.children 사용의 이점

• React 공식문서의 주요 개념 중 '합성 vs 상속' 을 보면,
  "어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있습니다."
  라고 되어있다. 즉, 직접 자식을 사용하기에 어려운 상황들이 존재한다는 것이다.
  이런 경우에서, 같은 레이아웃 안에 다른 내용을 보여줘야 할 경우, children을 사용하면
  효율적인 컴포넌트의 재사용을 할 수 있다.