You might need render props

Page.jsx

function Page() {
  return (
    <Layout>
      {/* Tab의 상태는 WithTab 내부로 추상화 */}
      <WithTab items={tabItems}>
        {selectedTab => {
          switch (selectedTab) {
            case 'LOGIN':
              return <Login />
            case 'JOIN':
              return <Join />
            case 'HOME':
            default:
              return <Home />
          }
        }}
      </WithTab>
    </Layout>
  )
}


// 꼭 children으로만 함수를 전달할 필요는 없습니다 :)
function Page() {
  return (
    <Layout>
      <WithTab
        items={tabItems}
        renderContent={selectedTab => {
          switch (selectedTab) {
            case 'LOGIN':
              return <Login />
            case 'JOIN':
              return <Join />
            case 'HOME':
            default:
              return <Home />
          }
        }}
      />
    </Layout>
  )
}