[handler] 사용자 행동을 연결하는 함수

728x90

핸들러(handler) 

핸들러(handler)는 말 그대로 어떤 "일을 처리하는" 함수입니다. 보통 특정 이벤트(event)가 발생했을 때, 그 이벤트에 반응하여 정의된 동작을 수행하는 함수를 의미합니다. 이런 이벤트는 사용자 인터랙션일 수도 있고, 네트워크 요청 결과일 수도 있으며, 시스템 내부의 트리거나 오류일 수도 있습니다.

리액트 같은 프론트엔드 프레임워크뿐만 아니라, 백엔드, 시스템 프로그래밍, 심지어 IoT에서도 핸들러 개념은 동일하게 적용됩니다. 중요한 건 "무엇인가가 발생했을 때 어떻게 반응할지를 정의하는 함수"라는 점입니다.

 

---

 

1.  어떤 상황에서 핸들러가 등장할까?

핸들러는 다음과 같은 상황에서 자주 사용됩니다.

1. 이벤트 기반 프로그래밍
   • UI 요소 클릭, 입력, 포커스, 스크롤 등
   • 예: click, change, submit 등 DOM 이벤트
2. 비동기 작업 처리
   • API 요청 후 응답 처리
   • setTimeout, setInterval에 넘기는 콜백
3. 시그널 처리 (시스템)
   • 리눅스의 SIGINT, SIGTERM 같은 시스템 이벤트
4. 오류 처리
   • try-catch의 예외 핸들러 (catch 블록)

 

---

 

2.  자바스크립트 예시 코드로 살펴보는 핸들러

 

// 1. 버튼 클릭 핸들러
function handleClick(event) {
  console.log("버튼이 클릭되었습니다!", event);
}

document.querySelector("#myBtn").addEventListener("click", handleClick);

// 2. API 응답 핸들러
function handleResponse(data) {
  console.log("서버에서 받은 데이터:", data);
}

fetch("/api/data")
  .then(res => res.json())
  .then(handleResponse);

// 3. 타이머 핸들러
function handleTimeout() {
  console.log("3초가 지났습니다!");
}

setTimeout(handleTimeout, 3000);

• 핸들러는 이렇게 “콜백(callback)” 형태로 사용되며, 이벤트가 발생했을 때 실행되도록 함수 참조만 전달합니다.

 

---

 

3.  핸들러 함수 이름 규칙

많은 개발자들이 관례적으로 핸들러 함수 이름을 handleSomething 형태로 짓습니다.

예시 :

• handleClick
• handleInputChange
• handleFormSubmit

이러한 네이밍은 코드의 의도를 명확히 하고, 유지보수나 협업 시 가독성을 높이는 데 도움을 줍니다.

 

---

 

4.  핸들러 vs 일반 함수

구분	핸들러 함수	일반 함수
호출 방식	이벤트/시스템에 의해 호출됨	직접 호출
이름 규칙	handle~, on~ 등의 명명 규칙을 따름	자유로움
용도	반응 처리 (이벤트, 비동기, 시스템 등)	로직 수행, 유틸리티 등

 

---

 

5.  React에서 자주 보는 핸들러 예시

function MyComponent() {
  const handleInputChange = (e) => {
    console.log("입력 값:", e.target.value);
  };

  return <input onChange={handleInputChange} />;
}

• 리액트에서는 핸들러를 컴포넌트 안에 정의하고, JSX 속성 (onClick, onChange 등)에 함수로 넘깁니다. 이게 바로 “사용자 입력에 반응하는 방식”의 대표적인 구현입니다.

 

---

 

6.  마무리

• 핸들러(handler)는 이벤트가 발생했을 때 호출되어 적절한 작업을 수행하는 함수입니다.
• 핸들러는 이벤트 기반 시스템에서 반응성(responsiveness)을 구현하는 핵심 개념입니다.
• 자바스크립트뿐 아니라 거의 모든 프로그래밍 언어/플랫폼에서 사용되는 보편적인 개념입니다.
• handle~() 같은 명명 방식은 핸들러 함수임을 명확히 하기 위한 관습입니다.
• 리액트 등 프레임워크에서는 이벤트 속성과 함께 자주 사용됩니다.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - Event Handlers
• React 공식 문서 - Responding to Events

 

---