리액트에서 이벤트 처리하기

리액트에서 이벤트는 DOM 요소에 이벤트 핸들러를 등록해 처리한다.

HTML에서 이벤트 속성에 문자열을 전달하는 방식과 달리, 리액트에서는 JSX에 이벤트 핸들러로 참조를 전달한다.

 

function App() {
  const handleClick = () => {
    console.log("버튼이 클릭되었습니다!");
  };

  return <button onClick={handleClick}>클릭</button>;
}

 

위 코드에서 onClick 속성은 소문자가 아닌 camelCase로 작성해야 하며, 함수는 문자열이 아닌 함수 참조를 전달해야 한다.