[React.js] JSX 구문에서 이벤트 리스너 넘기기

function App() {
  const [value, setValue] = React.useState("Save Changes");
  const changeValue = () => {
    setValue("Revert");
  };
  return (
    <div>
      <Btn text={value} onClick={changeValue} /> // 이건 이벤트리스너가 아니고 prop이다
    </div>
  );
}

Btn 컴포넌트를 불러와 이벤트를 발생시킬 때

실제 이벤트는 컴포넌트 내부의 함수에서 동작한다.

App의 Btn컴포넌트 생성문에 작성한 onClick은 그저 prop일 뿐이다.

 

즉, Btn컴포넌트 코드에서 위의 onClick prop을 받아 실행시켜줘야 한다.

 

function Btn({ text, onClick }) {
  return (
    <button
      onClick={onClick} // prop을 받아 이벤트리스너 실행
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "10px 20px",
        border: 0,
        borderRadius: 10,
      }}
    >
      {text}
    </button>
  );
}

 

 

prop으로 전달되는 onClick 이라는 key가 헷갈릴 수 있으니

아래와 같이 수정

 

function Btn({ text, changeValue }) {
  return (
    <button
      onClick={changeValue}
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "10px 20px",
        border: 0,
        borderRadius: 10,
      }}
    >
      {text}
    </button>
  );
}

function App() {
  const [value, setValue] = React.useState("Save Changes");
  const changeValue = () => {
    setValue("Revert");
  };
  return (
    <div>
      <Btn text={value} changeValue={changeValue} />
      <Btn text="Continue" />
    </div>
  );
}