React_버튼 이벤트 처리

 

App.js

import TabButton from "./components/TabButton"

export default function App(){

  var x = "버튼을 선택하세요";

  function handelEvent(selectedButton){

    //일반적인 변수는 화면 갱신 X(App이 한번만 실행되기 때문)

    console.log("Hello Button", selectedButton);

    //useState hook을 이용해 해결 가능

    x = selectedButton;

  }

  //App 컴포넌트 실행횟수 체크 => 실행하면 1번만 호출

  console.log("App Component");

return(

<>

  <h1>이벤트 처리</h1>

  {/* *********************************

      onSelect대신 임의의 값 사용 가능

      자식 호출 시 이벤트 함수 전달

      매우 많이 사용되는 중요한 패턴

      ********************************

  */}

  <TabButton onSelect={(e) => handelEvent("JAVA")}>JAVA</TabButton>

  <TabButton onSelect={(e) => handelEvent("SQL")}>SQL</TabButton>

  <TabButton onSelect={(e) => handelEvent("REACT")}>REACT</TabButton>

  <TabButton onSelect={(e) => handelEvent("VUE")}>VUE</TabButton>

  <h3>선택된 출력값</h3>

  {x}

  </>

)}

 

TabButton.js

export default function TabButton({children, onSelect}){

    //TabButton 컴포넌트 실행회수 => 버튼이 4개이므로 4번

    console.log("TabButton Component");

    return (

        <>

        {/* 부모에게서 전달 받은 이벤트 사용 */}

        <button onClick={onSelect}>{children}</button>

        </>

    )

}