NEW(스크립트용)
{children}사용방법
maggieH
2021. 9. 12. 15:34
**공통상위 컴퍼넌트를 묶고 싶을때 children 을 사용하며 하단과 같이 사용 가능하다.
( css는 테일윈드 사용)
//부모컴퍼넌트
import Header from "../Header";
/*ui*/
import ArrowBackIosOutlinedIcon from "@material-ui/icons/ArrowBackIosOutlined";
const Parent = () => {
return (
<div
id="Parent"
className=" w-full h-full bg-white fixed top-0 left-0 "
style={{ zIndex: 500 }}
>
<Header>
<ArrowBackIosOutlinedIcon style={{ fontSize: 25 }} />
</Header>
</div>
);
};
[...]
//자식 컴퍼넌트
import React from "react";
const Header = ({ children }) => {
return (
<div className="tit border-b-2">
<div className="inner flex justify-between py-8">
{children}
<div></div>
</div>
</div>
);
};
export default Header;