React에서의 Event Handler

 React에서 이벤트 핸들러는 DOM 이벤트를 처리하는 중요한 역할을 한다. 특히, e.stopPropagation()과 e.preventDefault()는 자주 사용되지만 서로 다른 목적으로 사용되는 함수다. 두 함수를 혼동하지 않도록 주의해야 한다.

e.stopPropagation()

 e.stopPropagation()은 이벤트 버블링을 멈추기 위한 함수다. 버블링은 이벤트가 발생한 요소에서 상위 요소로 전달되는 과정을 의미한다. 예를 들어, 버튼 클릭 이벤트가 버튼을 감싸고 있는 div나 그 외 상위 요소로도 전달될 수 있다. 이때 e.stopPropagation()을 사용하면, 클릭 이벤트가 상위 요소로 전파되지 않게 막을 수 있다. 상위 태그에 부착된 이벤트 핸들러들이 실행되는 것을 방지하는 데 유용하다.

e.preventDefault()

 e.preventDefault()는 브라우저의 기본 동작을 막기 위한 함수다. 예를 들어, form이 제출될 때 기본적으로 페이지가 새로고침되는데, e.preventDefault()를 사용하면 이를 막을 수 있다. 이 외에도 a 태그의 링크 이동 기능이나 특정 키보드 이벤트에 대한 기본 동작을 차단하는 데도 사용된다.

두 함수는 각각 다른 목적으로 사용되므로 혼동하지 않고 적절히 활용하는 것이 중요하다.

이벤트 핸들러에서의 Side Effect

 이벤트 핸들러는 side effect를 일으키는 것이 허용되는 장소다. side effect란 컴포넌트의 렌더링 과정과는 무관하게 상태를 변경하거나 외부와 상호작용하는 행동을 의미한다. React의 렌더링 함수는 순수 함수여야 하지만, 이벤트 핸들러는 반드시 순수하지 않아도 된다.

Side Effect의 예시

 이벤트 핸들러에서 자주 사용되는 side effect 중 하나는 상태(State)의 변화를 일으키는 것이다. 예를 들어, 사용자가 버튼을 클릭했을 때 리스트의 항목을 변경하거나, 사용자가 텍스트 필드에 입력한 값을 저장하는 등의 작업이 가능하다. 이처럼 이벤트 핸들러는 상호작용에 따라 컴포넌트의 동작을 변화시키는 역할을 한다.

function Example() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value); // side effect로 상태 업데이트
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

 위 예시에서 handleChange 함수는 이벤트 핸들러로, 사용자의 입력에 따라 상태를 업데이트하는 side effect를 일으킨다. React에서는 이러한 방식으로 상태 변화를 쉽게 관리할 수 있다.

Side Effect 관리의 중요성

 이벤트 핸들러에서 side effect를 발생시키는 것은 매우 유용하지만, 그만큼 신중하게 다뤄야 한다. 과도한 side effect는 예기치 않은 동작을 유발할 수 있으며, 코드의 예측 가능성을 낮출 수 있다. React에서는 상태 관리를 통해 side effect를 명확히 관리하고, 이벤트 핸들러가 예상된 동작만 수행하도록 설계하는 것이 중요하다.

 결론적으로, 이벤트 핸들러는 side effect를 발생시킬 수 있는 최적의 장소다. 순수함을 유지해야 하는 렌더링 함수와 달리, 이벤트 핸들러는 사용자 상호작용에 맞춰 컴포넌트의 동작을 변화시키는 데 적합하다.