컴포넌트 사용시 내부에 컴포넌트가 있는 경우

App에서 다음과 같이 사용하고자 한다. Wrapper컴포넌트 안에 Hello 컴포넌트가 들어간 것을 볼 수 있다.

function App() {

  return (

    <Wrapper>

       <Hello />

    </Wrapper>

  );

}

---

Wrapper에서 인자로 {children}을 통해 Hello 컴포넌트를 받아주어야한다.

function Wrapper({children}){

    const style = { background: "gray" };

    return <div style={style}>{children}</div>

}

---

function Hello() {

    return (

        <div>안녕하세요</div>

    );

}

---

 

이렇게 각각 작성하면 다음과 같은 결과를 얻을 수 있다.