본문 바로가기

NEW(스크립트용)

{children}사용방법

**공통상위 컴퍼넌트를 묶고 싶을때 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;