children prop의 사용

 

React에서는 children이라는 reserved prop이 존재한다.

"Children are the components that are placed inside the component."란다. 

 

import React from "react";
import MyComponent from "./MyComponent";

// MyComponent 라는 컴포넌트 사이에 '리액트'라는 문자열이 있습니다.
// <MyComponent /> 라고 간단히 쓸 수 있지만 이 경우에는 children을 만들어주기 위해...

function App() {
  return <MyComponent>리액트</MyComponent>;
}

// props에는 자동으로 children 요소가 생깁니다. 이를 활용할 수 있습니다.
const MyComponent = (props) => {
  return (
    <>
      <div>{props.children}</div>
    </>
  );
};