[TIL] 2023.09.04 - <Header /> 와 <Header></Header>

 <Header /> 

• 부모 컴포넌트에서 children을 받아 Header 아래 렌더링!

// Header와 children이 별도로 렌더링!

function Layout({ children }) {
  return (
    <Wrap>
      <Header />
      {children}
    </Wrap>
  )
}

export default Layout;

 

 <Header></Header> 

• 부모 컴포넌트에서 children을 받아 Header 안에 렌더링! → Header만 출력되고 내용물은 보이지 않게 됨ㅜㅜ

// 이렇게 작성하면 Header 안에 children을 렌더링해서 상단만 출력됨

function Layout({ children }) {
  return (
    <Wrap>
      <Header>
        {children}
      </Header>
    </Wrap>
  )
}

export default Layout;