[React] props(2) : children 활용

 

헷갈리는 props ..🥵

 

💡 props : 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 값들

💡 children :  부모 컴포넌트 내에서 자식 태그로 감싼 모든 값들

 

function User({ children }) {
  return <div>{children}</div>;
}

function Layout({ children }) {
  return (
    <>
      <header>title~~</header>
      {children}
    </>
  );
}

function App() {
  return (
    <div>
      <User>안녕하세요</User> {/*children : 부모인 App 내에서 자식 User 로 감싼 안녕하세요*/}
      <Layout>content, content, content</Layout> {/*children : 부모인 App 내에서 자식 Layout 으로 감싼 content..*/}
    </div>
  );
}

export default App;

 

App 에서 감싼 User 의 안녕하세요 출력

➡️ Layout 의 header 출력

➡️ Layout 으로 감싼 content.. 출력