children

AppWrap.jsx

import React from "react";

export default function AppWrap() {
    return (
        <div>
	 	// React는 컴포넌트 사이에 있는 컴포넌트 혹은 태그를 감싸서 props객체의 children으로 넘겨준다
            <Navbar>
                <Avatar
                    url="https://w.namu.la/s/03840c3d31d2da06ed86073ea746b1d77a9d13d46735ddbb19ab7b2baf3cd7354ca13d48d6894bbe79588deaed7add1053b046da7e5580f03a7f3864d4f4c9bb6be14ceab018e39db3c995125037e86d6a1d8ff55e7fd98b60e3002b118eca9f99d94132e8827843bc0ea82fe908a3b0"
                    name="Ye"
                    size={200}
                />
            </Navbar>
        </div>
    );
}

function Navbar({ children }) {
    return <header style={{ backgroundColor: "yellow" }}>{children}</header>;
}

function Avatar({ url, name, size }) {
    return (
        <div>
            <img
                src={url}
                alt={name}
                width={size}
                height={size}
                style={{ borderRadius: "50%" }}
            />
        </div>
    );
}

View

AppCard.jsx

import React from 'react';

export default function AppCard() {
  return (
    <>
      <Card>
        <p>Card1</p>
      </Card>

      <Card>
        <h1>Card2</h1>
        <p>설명</p>
      </Card>
    </>
  );
}

function Card({ children }) {
  return (
    <div
      style={{
        backgroundColor: 'black',
        borderRadius: '20px',
        color: 'white',
        minHeight: '200px',
        maxWidth: '200px',
        margin: '1rem',
        padding: '1rem',
        textAlign: 'center',
      }}
    >
      {children}
    </div>
  );
}

View