웹(web)/프론트엔드-react
컴포넌트 사용시 내부에 컴포넌트가 있는 경우
바코94
2020. 7. 3. 22:10
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>
);
}
이렇게 각각 작성하면 다음과 같은 결과를 얻을 수 있다.
