Event Handling
Event Handling은 사용자의 클릭, 입력, 제출 같은 브라우저 이벤트를 React 코드에 연결하는 방식입니다. React에서는 JSX 속성에 핸들러 함수를 넘겨 어떤 입력에 어떻게 반응할지 선언합니다.
▶아키텍처 다이어그램
🔄 프로세스 다이어그램점선 애니메이션은 데이터 또는 요청의 흐름 방향을 나타냅니다
화면이 보이기만 하고 사용자의 행동에 반응하지 않으면 애플리케이션이라고 보기 어렵습니다. 하지만 이벤트가 발생한 순간마다 DOM을 직접 고치기 시작하면 값 흐름이 흩어지고, 어떤 입력이 어떤 화면 변화를 만들었는지 추적하기 어려워집니다.
DOM 기반 개발에서는 addEventListener로 요소마다 직접 이벤트를 붙이고, 콜백 안에서 DOM 조작을 수행하는 방식이 흔했습니다. React는 이 패턴을 컴포넌트와 state 중심 흐름 안으로 가져와, 이벤트를 화면 갱신의 출발점으로만 두고 실제 UI 계산은 렌더링이 맡도록 정리했습니다.
사용자가 입력을 하면 브라우저 이벤트가 발생하고, React는 JSX에 연결된 핸들러를 실행합니다. 이 핸들러 안에서는 state를 업데이트하거나 상위에서 받은 콜백을 호출해 다음 동작을 결정합니다. 이후 React는 바뀐 값을 바탕으로 필요한 UI를 다시 계산합니다.
이벤트 핸들러와 Effect는 둘 다 코드를 실행하지만 출발점이 다릅니다. 이벤트 핸들러는 사용자의 직접 행동에 반응하고, Effect는 렌더링이 끝난 뒤 외부 시스템과 동기화할 때 실행됩니다. 또한 controlled components는 입력 이벤트를 state와 연결하는 폼 특화 패턴입니다.
실무에서는 핸들러가 너무 많은 책임을 갖지 않게 자르는 것이 중요합니다. 클릭 한 번에 네트워크 호출, 폼 검증, 여러 state 조작, 라우팅이 모두 섞이기 시작하면 테스트가 어려워집니다. 입력 해석, state 변경, 후속 동기화의 경계를 나누면 이벤트 코드가 훨씬 안정적입니다.