이벤트 핸들링
이벤트 핸들러 추가하기
이벤트 핸들러(event handler)란 사용자의 마우스 클릭이나 키보드 동작, 사용자 입력의 포커스 등과 같은 이벤트가 발생했을 때 그 처리를 담당하는 실행 함수를 가리킵니다. React에서는 이러한 이벤트 핸들러를 JSX 코드 내에 작성하여 추가함으로써 해당 이벤트를 처리할 수 있습니다.
다음 예제는 버튼을 클릭하면 간단한 경고 대화 상자를 띄우는 예제입니다.
예제(App.js)
const App = () => {
const handleClick = () => {
alert("버튼을 클릭했습니다!");
};
return <button onClick={handleClick}>클릭하세요!</button>;
};
export default App;
React에서 이벤트 핸들러의 이름은 일반적으로 ‘handle’이라는 단어로 시작하여 처리하고자 하는 이벤트명을 뒤에 추가하는 방식으로 작성합니다.
React 이벤트 핸들러 이름 예시
const handleClick = () => {
// onClick 이벤트를 처리하는 코드
}
const handleMouseEnter = () => {
// onMouseEnter 이벤트를 처리하는 코드
}
HTML에서는 이벤트 프로퍼티의 이름으로 onclick, onkeydown과 같이 소문자만을 사용하지만, React에서는 다른 DOM 속성을 표기할 때처럼 카멜 표기법(camelCase)으로 작성해야 합니다.
그리고 HTML에서는 큰따옴표(””)를 사용하여 문자열 형태로 이벤트 핸들러를 전달하지만, React에서는 문자열이 아닌 함수 형태의 객체를 prop으로 전달해야 합니다.
HTML
<button onclick="handleClick()"> 확인 <button>
React
<button onClick={handleClick}"> 확인 </button>
또한, JSX 코드 내에서 인라인 방식으로 이벤트 핸들러를 선언과 동시에 전달할 수도 있으며, 보다 간결하게 화살표 함수를 사용할 수도 있습니다.
인라인 방식
// 일반 함수
<button onClick={function handleClick() {
alert("버튼을 클릭했습니다!");
}}>
// 화살표 함수
<button onClick={() => {
alert("버튼을 클릭했습니다!");
}}>
React에서 이벤트 핸들러는 호출하는 것이 아니라 전달되어야만 합니다. 다음 코드는 이벤트 핸들러의 뒤에 실수로 소괄호(())를 붙였기 때문에 함수를 전달하는 것이 아니라 호출하는 코드가 되었습니다. 이렇게 이벤트 프로퍼티에 이벤트 핸들러를 호출하는 코드를 전달하면 버튼을 클릭했을 때 실행되는 것이 아니라 해당 페이지가 렌더링(rendering)될 때마다 곧바로 실행되게 됩니다.
잘못된 예제
// 해당 페이지가 렌더링될 때마다 즉시 호출됨! <button onClick={handleClick()}> 확인 </button>
이벤트 핸들러에서 props 참조하기
이벤트 핸들러는 React 컴포넌트 내부에서 선언되기 때문에 컴포넌트의 props에 손쉽게 접근할 수 있습니다.
다음 예제는 버튼을 클릭하면 message prop으로 전달된 값을 경고 대화 상자에 보여주는 예제입니다.
예제(ControlPanel.js)
const ControlButton = ({ message, children }) => {
return <button onClick={() => alert(message)}>{children}</button>;
};
const ControlPanel = () => {
return (
<>
<ControlButton message="음악을 재생합니다.">▶ Play</ControlButton>
<ControlButton message="재생을 중지합니다.">▣ Stop</ControlButton>
</>
);
};
export default ControlPanel;
이벤트 핸들러를 props로 전달하기
부모 컴포넌트에서 자식 컴포넌트의 이벤트 핸들러를 동적으로 명시해야 할 경우가 생길 수 있습니다. 그럴 경우에는 다음 예제처럼 부모 컴포넌트로부터 전달 받은 props를 그대로 이벤트 핸들러에 전달하면 됩니다.
예제(ControlPanel.js)
const Button = ({ onClick, children }) => {
return <button onClick={onClick}>{children}</button>;
};
const PlayButton = ({ musicName }) => {
const handlePlayClick = () => {
alert(`${musicName}을 재생합니다.`);
};
return <Button onClick={handlePlayClick}>▶ Play "{musicName}"</Button>;
};
const StopButton = () => {
return <Button onClick={() => alert("재생을 중지합니다.")}>▣ Stop</Button>;
};
const ControlPanel = () => {
return (
<>
<PlayButton musicName="TRUST" />
<StopButton />
</>
);
};
export default ControlPanel;
연습문제
