[React] 이벤트 핸들링 (Event Handling)

React에서 이벤트 핸들링은 사용자가 웹에서 하는 행동을 처리하는 방법입니다.

예를 들어 버튼 클릭, 스크롤, 키 입력 등이 이벤트로 발생할 수 있죠.

이 이벤트들을 처리하기 위해 React에서는 이벤트 핸들러를 사용합니다.

---

01

이벤트 핸들링이란

Event: 웹에서의 이벤트는 사용자의 행동을 의미합니다.

예를 들어, 버튼 클릭, 마우스 오버, 입력 폼 작성, 스크롤 등 다양한 사용자 동작이 이에 해당합니다.

 

Handling: Handling은 '다루다', '처리하다'는 뜻입니다.

 

이 두 가지를 합쳐서 이벤트 핸들링(Event Handling)은 사용자가 특정 행동을 했을 때,  그에 맞는 처리를 해주는 과정을 의미합니다.

예를 들어, 버튼을 클릭할 때 경고창을 띄우는 것과 같은 동작을 처리하는 방식입니다.

---

02

React에서 이벤트 처리하기

React에서는 HTML의 이벤트 속성처럼 onClick, onMouseEnter 같은 속성을 사용해서 이벤트를 처리합니다.

이벤트가 발생했을 때 호출할 함수를 지정해 주면 됩니다.

<Button onClick={() => { console.log("클릭됨!"); }} />

이렇게 onClick 속성에 함수를 넣어서 버튼 클릭 시 동작을 처리할 수 있습니다.

 

만약 함수가 길어진다면, 바로 작성하기보다는 함수로 분리해서 관리하는 것이 좋습니다.

const handleClick = () => {
    console.log("클릭됨!");
}

return(
	<Button onClick={handleClick} />
)

 

 

" 함수 호출 주의 "

이벤트 핸들러를 설정할 때는 함수를 호출하지 않고 콜백함수처럼 함수의 이름만 전달해야 합니다.

아래처럼 함수를 호출하는 실수를 하지 않도록 주의해야 합니다.

 

<잘못된 예시>

<Button onClick={handleClick()} />  // 호출되는 함수

 

<올바른 예시> 

<Button onClick={handleClick} />  // 함수 이름만 전달

---

03

이벤트 객체 (SyntheticEvent)

React에서 발생하는 모든 이벤트는 이벤트 핸들러 함수가 호출될 때, 이벤트 객체를 매개변수로 전달합니다.

이 객체는 e라는 이름으로 전달되며, 다양한 이벤트 관련 정보를 담고 있습니다.

const handleClick = (e) => {
    console.log(e); // 이벤트 객체 출력
}

return(
	<Button onClick={handleClick} />
)

이때 출력되는 e는 SyntheticEvent라는 객체입니다. 

 

합성 이벤트 ( SyntheticEvent ) 란?

합성 이벤트(Synthetic Event)는 React에서 사용하는 이벤트 객체로, 다양한 웹 브라우저에서 발생하는 이벤트 객체들을 하나의 통일된 형식으로 만들어 제공합니다.

 

웹에서는 다양한 브라우저들이 존재하고, 각 브라우저마다 이벤트 객체의 동작 방식이 조금씩 다릅니다.

예를 들어 Chrome, Firefox, Internet Explorer와 같은 브라우저가 모두 조금씩 다르게 동작할 수 있습니다.

이런 차이점으로 인해 Cross Browser Issue가 발생할 수 있습니다.

 

이를 해결하기 위해 React는 Synthetic Event라는 통일된 규격을 제공합니다.

Synthetic Event는 각 브라우저에서 발생하는 이벤트 객체를 하나의 형식으로 통일하여 제공하므로,

개발자는 브라우저의 차이를 신경 쓰지 않고 React에서 이벤트를 처리할 수 있게 됩니다.

---

04

이벤트 전파 및 기본 동작 제어

이벤트를 핸들링할 때, 특정 동작을 막거나 이벤트의 전파를 차단해야 하는 경우가 있습니다.
React에서는 이를 위해 e.preventDefault()와 e.stopPropagation()을 사용합니다.

1. e.preventDefault()  → 기본 동작 막기

e.preventDefault()는 요소의 기본 동작을 방지하는 함수입니다.
주로 <a> 태그의 링크 이동이나 <form> 제출 시 새로고침을 막을 때 사용됩니다.

<form onSubmit={(e) => {
    e.preventDefault(); 
    console.log("폼 제출 막힘!");
}}>
    <button type="submit">제출</button>
</form>

submit 버튼을 눌러도 페이지가 새로고침되지 않고 콘솔에 "폼 제출 막힘!"이 출력됩니다. 

 

2. e.stopPropagation() → 이벤트 전파 막기

e.stopPropagation()은 부모 요소로 이벤트가 전달되는 것을 차단하는 함수입니다.
예를 들어, 부모와 자식 요소에 onClick 이벤트가 있을 때, 자식 요소를 클릭하면 부모의 onClick까지 실행되는 경우가 있다.
이때 e.stopPropagation()을 사용하면 자식 요소의 이벤트만 실행되고, 부모 요소의 이벤트는 실행되지 않는다.

<div onClick={() => console.log("부모 div 클릭!")}>
    <button onClick={(e) => {
        e.stopPropagation();
        console.log("버튼 클릭!");
    }}>
        버튼
    </button>
</div>

버튼을 클릭하면 "버튼 클릭!"만 출력되고, 부모의 onClick은 실행되지 않습니다.

반면, 부모 영역을 클릭하면 "부모 div 클릭!"이 출력됩니다.  

---

05

다양한 이벤트 핸들링 함수 종류

React에서 자주 사용하는 이벤트 핸들링 함수에는 여러 가지가 있습니다.

아래는 몇 가지 일반적으로 사용되는 이벤트 핸들링 함수들입니다.

1. onClick ⭐

버튼 클릭, 링크 클릭 등의 마우스 클릭 이벤트를 처리할 때 사용합니다.

<Button onClick={() => console.log("버튼 클릭!")} />

 

2. onChange ⭐

입력 필드에서 값이 변경될 때 사용합니다.

사용자가 입력한 값이 완전히 변경된 후에 이벤트가 발생합니다.

주로 텍스트 입력 후 엔터를 치거나 다른 곳을 클릭할 때 발생합니다.

<input type="text" onChange={(e) => console.log(e.target.value)} />

 

⭐ Value 관리

React에서는 상태를 관리할 때 value와 onChange를 함께 사용하는 패턴이 많이 사용됩니다.

상태를 관리하면서 값이 바뀔 때마다 UI에 반영되도록 하는 방식입니다.

이는 제어 컴포넌트( Controlled Component )라고 부르며, React에서 상태를 효율적으로 관리하는 방법 중 하나입니다.

 

3. onSubmit ⭐

폼 제출 이벤트를 처리할 때 사용합니다.

<form onSubmit={(e) => { e.preventDefault(); console.log("폼 제출!"); }}>
    <button type="submit">제출</button>
</form>

 

4. onMouseEnter

마우스가 요소에 들어올 때 발생하는 이벤트입니다. 마우스 오버 효과를 처리할 때 사용합니다.

<div onMouseEnter={() => console.log("마우스가 들어왔습니다!")}>
    Hover over me!
</div>

 

5. onMouseLeave

마우스가 요소에서 나갈 때 발생하는 이벤트입니다.

<div onMouseLeave={() => console.log("마우스가 나갔습니다!")}>
    Hover over me!
</div>

 

6. onKeyDown

키보드의 키가 눌릴 때 발생하는 이벤트입니다. 주로 입력 필드에서 키 입력을 처리할 때 사용합니다.

<input type="text" onKeyDown={(e) => console.log("누른 키: ", e.key)} />

 

7. onFocus

입력 요소에 포커스가 갔을 때 발생하는 이벤트입니다.

<input type="text" onFocus={() => console.log("입력 필드에 포커스가 갔습니다!")} />

 

8. onLoad

이미지나 비디오 등의 리소스가 로드되었을 때 발생하는 이벤트입니다.

<img src="image.jpg" onLoad={() => console.log("이미지 로드 완료!")} />

 

8. onError ⭐

이미지나 비디오 등의 리소스가 로드 중 에러가 발생했을 때 발생하는 이벤트입니다.

<img src="wrong-image.jpg" onError={(error) => console.log("이미지 로드 실패!: ",error)} />

 

9. onScroll ⭐

사용자가 스크롤을 내리거나 올릴 때 발생하는 이벤트입니다.

<div onScroll={() => console.log("스크롤 이벤트 발생!")}>
    <p>스크롤을 해보세요</p>
</div>

 

10. onInput

사용자가 입력 필드에 내용을 입력할 때 발생하는 이벤트입니다.

onChange와 비슷하지만, onInput은 실시간으로 입력값이 변경될 때마다 발생합니다.

<input type="text" onInput={(e) => console.log("입력됨:", e.target.value)} />

 

" onInput 보다 onChange 를 더 많이 사용하는 이유 "

• onInput은 실시간 반영이 필요할 때 유용하지만,
  React에서 상태를 관리할 때는 성능 문제나 과도한 상태 업데이트가 일어날 수 있습니다.
• onChange는 상태 관리와 더 잘 결합되고,
  React에서는 주로 이 방식으로 데이터를 관리하는 것이 더 효율적입니다.

즉, React는 기본적으로 상태를 관리하는 방식을 선호하는데,

onInput은 실시간으로 발생하는 이벤트이기 때문에 상태를 바로바로 갱신해야 하므로, 

상태 업데이트가 너무 자주 일어나게 될 수 있습니다. 이는 성능에 부정적인 영향을 줄 수 있습니다.

 

그래서 많은 개발자들이 onChange를 더 자주 사용하는 이유는 React에서 상태 관리와 컨트롤드 컴포넌트 방식을 자연스럽게 활용할 수 있기 때문이에요.

---

06

마무리

위에서 소개한 이벤트 핸들러 외에도 다양한 이벤트 핸들러가 있습니다.

React에서 자주 사용되는 이벤트 처리 방법들을 익히고 나면, 웹 애플리케이션에서 사용자와의 상호작용을 쉽게 처리할 수 있습니다.

더 많은 내용은 React 공식 문서를 참고하세요!