props.children

컴포넌트 태그 사이에 넣은 값을 출력하고 싶을 때

props.children을 사용하면 출력이 가능합니다.

 

function App() {
  return (
    <>
      <Wrapper>
        <Hello name='react' color='red' />
        <Hello color='blue' />
      </Wrapper>

    </>
  );
}

Wrapper 이라는 컴포넌트로 여러 컴포넌트를 감싸고 안에 있는 내용을 출력하고 싶을때 props.children을 사용합니다.

 

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

비구조화 할당 문법을 사용하여 다음과 같이 표기하면

 

다음과 같이 출력됩니다!