Event Handling
Event Handling은 사용자의 클릭, 입력, 제출 같은 브라우저 이벤트를 React 코드에 연결하는 방식입니다. React에서는 JSX 속성에 핸들러 함수를 넘겨 어떤 입력에 어떻게 반응할지 선언합니다.
▶아키텍처 다이어그램
🔄 프로세스 다이어그램점선 애니메이션은 데이터 또는 요청의 흐름 방향을 나타냅니다
화면이 보이기만 하고 사용자의 행동에 반응하지 않으면 애플리케이션이라고 보기 어렵습니다. 하지만 이벤트가 발생한 순간마다 DOM을 직접 고치기 시작하면 값 흐름이 흩어지고, 어떤 입력이 어떤 화면 변화를 만들었는지 추적하기 어려워집니다.
DOM 기반 개발에서는 addEventListener로 요소마다 직접 이벤트를 붙이고, 콜백 안에서 DOM 조작을 수행하는 방식이 흔했습니다. React는 이 패턴을 컴포넌트와 state 중심 흐름 안으로 가져와, 이벤트를 화면 갱신의 출발점으로만 두고 실제 UI 계산은 렌더링이 맡도록 정리했습니다.
사용자가 입력을 하면 브라우저 이벤트가 발생하고, React는 JSX에 연결된 핸들러를 실행합니다. 이 핸들러 안에서는 state를 업데이트하거나 상위에서 받은 콜백을 호출해 다음 동작을 결정합니다. 이후 React는 바뀐 값을 바탕으로 필요한 UI를 다시 계산합니다.
클릭 이벤트가 state 변화를 시작하는 흐름
import { useState } from "react";
export function ModalToggle() {
const [isOpen, setIsOpen] = useState(false);
function handleToggle() {
setIsOpen((open) => !open);
}
return (
<>
<button onClick={handleToggle}>
{isOpen ? "닫기" : "열기"}
</button>
{isOpen && <Dialog>설정</Dialog>}
</>
);
}이벤트 핸들러의 역할은 브라우저 입력을 받아 다음 state 변화를 결정하는 것이고, 실제 UI 전환은 그 다음 렌더가 맡습니다.
이벤트 객체를 읽고 기본 동작을 해석하기
import { useState } from "react";
function SearchForm({ onSearch }: { onSearch: (query: string) => void }) {
const [query, setQuery] = useState("");
function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
onSearch(query);
}
return (
<form onSubmit={handleSubmit}>
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
/>
<button type="submit">검색</button>
</form>
);
}핸들러는 단순 클릭 감지가 아니라, 이벤트 객체를 읽고 기본 동작을 막거나 상위 로직으로 연결하는 해석 지점이기도 합니다.
이벤트 핸들러와 Effect는 둘 다 코드를 실행하지만 출발점이 다릅니다. 이벤트 핸들러는 사용자의 직접 행동에 반응하고, Effect는 렌더링이 끝난 뒤 외부 시스템과 동기화할 때 실행됩니다. 또한 controlled components는 입력 이벤트를 state와 연결하는 폼 특화 패턴입니다.
실무에서는 핸들러가 너무 많은 책임을 갖지 않게 자르는 것이 중요합니다. 클릭 한 번에 네트워크 호출, 폼 검증, 여러 state 조작, 라우팅이 모두 섞이기 시작하면 테스트가 어려워집니다. 입력 해석, state 변경, 후속 동기화의 경계를 나누면 이벤트 코드가 훨씬 안정적입니다.