**공통상위 컴퍼넌트를 묶고 싶을때 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;
'NEW(스크립트용)' 카테고리의 다른 글
react input type files 의 이미지 mapping 및 삭제 (dataTransfer.items.add, Array.slice(index,1) 사용) (0) | 2022.03.25 |
---|---|
select react로 custom 하기 (기존 select option 사용 x) (0) | 2022.03.16 |
react useState 로 토글버튼 만들기 (0) | 2022.03.14 |
날짜 앞뒤 *일 이후 이전 값 구하기(javascript) (0) | 2022.03.07 |
toastify 활용하기 (0) | 2022.03.04 |