kwoncharles

let amplitude: any;
let ga: any;

function WithLogging({
  action,
  eventName,
  children,
}: {
  action: 'view' | 'click' | 'focus';
  eventName: string;

kwoncharles

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

kwoncharles

// Tabs.jsx
import React from 'react'

function Tabs({ children }) {
  const [selectedTab, setTab] = React.useState(initialTab)

  return (
    <ul className="tab-container">
      {children(selectedTab, setTab)}
    </ul>

kwoncharles

// 일반 컴포넌트
<Button>
  눌러주세요
</Button>

// Render Props 컴포넌트
<Button>
  {() => <>눌러주세요</>}
</Button>

kwoncharles

// Tabs.jsx
import React from 'react'

const TabContext = React.createContext()

function Tabs({ children }) {
  const [selectedTab, setTab] = React.useState(initialTab)

  return (
    <TabContext.Provider value={{ selectedTab, setTab }}>

kwoncharles

<select>
  <option>당근</option>
  <option>양파</option>
  <option>마늘</option>
  <option>배추</option>
  <option>오이</option>
</select>

kwoncharles

// Tabs.js
import React from 'react'

function Tabs({ children }) {
  const [selectedTab, setTab] = React.useState(initialTab)

  return (
    <ul className="tab-container">
      {React.Children.map(children, child => (
        React.cloneElement(child, {

kwoncharles

function Page() {
  return (
    <Tabs>
      {tabItems.map(tabItem => (
        <Tabs.Item value={tabItem}>
          {tabItem}
        </Tabs.Item>
      ))}
    </Tabs>
  )

kwoncharles

function Page() {
  const [selectedTab, setTab] = React.useState(initialTab)

  return (
    <Tabs>
      {tabItems.map(tabItem => (
        <Tabs.Item
          value={tabItem}
          isSelected={selectedTab === tabItem}
          onSelect={setTab}

kwoncharles

function Page() {
  const [tab, setTab] = React.useState(initialTab)

  return (
    <Tabs
      items={tabItems}
      onSelectTab={setTab}
      selectedTab={tab}
    />
  )