[React]-children으로 컴포넌트의 재사용성을 높이자!

여러 곳에서 사용할 Navbar라는 컴포넌트를 만든다고 예를 들어보자.
이런 경우 각각의 Navbar안의 요소들을 다르게 하고 싶을 때,
우리는 wrap component라는 개념을 활용할 수 있다!
그리고 wrap component의 핵심은 바로 children인데!!

컴포넌트를 재사용함에 있어서 그 아래 자식들을 전달할 때는 children을 props로 전달하면 된다!

import React from "react";

export default function AppWrap() {
  return (
    <div>
      <Navbar>
        <Avatar
          image="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZmFzaGlvbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=1200&q=60"
          name="Julie"
          size={200}
        />
        <p>안녕하세요!</p>
      </Navbar>
      <Navbar>
        <p>코딩좋아!</p>
      </Navbar>
    </div>
  );
}

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

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