18. 이벤트 함수에 커스텀 인자 전달하기

• 프로젝트 링크

• 이벤트 함수에 커스텀 인자 전달하기

  src/App.tsx

  import TabButton from "./TabButton";
  
  function App() {
    function handleSelect(selectedButton) {
      console.log(`TabButton ${selectedButton} selected!`);
    }
  
    return (
      <section id="examples">
        <h2>Examples</h2>
        <menu>
          <TabButton onSelect={() => handleSelect('components')}>Components</TabButton>
          <TabButton onSelect={() => handleSelect('jsx')}>JSX</TabButton>
          <TabButton onSelect={() => handleSelect('props')}>Props</TabButton>
          <TabButton onSelect={() => handleSelect('state')}>State</TabButton>
        </menu>
        Dynamic Content
      </section>
    );
  }
  

  src/components/TabButton.tsx

  function TabButton({children, onSelect}) {
    return (
      <li>
        <button type="button" onClick={onSelect}>{children}</button>
      </li>
    );
  }
  
  export default TabButton;