useEffect를 사용한 React의 전역 이벤트 핸들러

이제 버튼 클릭뿐만 아니라 키보드의 Enter 키를 눌러도 색상이 변경되도록 하고 싶다고 가정해 보겠습니다. 일반적인 React 방식으로는 addEventListener를 사용하여 전역 객체 window를 구독할 수 없습니다. 이를 위해 우리에겐 effect가 있습니다. useEffect를 사용하여 이 동작을 추가해 봅시다.

Enter 키를 눌렀을 때 실행될 핸들러 함수를 작성해 보겠습니다. 이 경우 색상을 빨간색으로 변경하도록 합시다:

App.jsxfunction handleEnter(event) {
  if (event.keyCode === 13) {
    setColor('red');
  }
}

이제 useEffect 훅 내에서 window에 대한 이벤트 리스너를 등록해 보겠습니다:

App.jsxuseEffect(() => {
  document.body.style.color = color;
  
  window.addEventListener('keydown', handleEnter);
}, [color]);

설정 함수가 있다면, 나중에 문제가 발생하지 않도록 하기 위해 항상 useEffect 내에서 정리 또는 구독 해제 코드를 반환해야 합니다. 이 경우에는 addEventListener를 등록한 후, 해당 리스너를 제거하는 코드를 반환해야 합니다:

App.jsxuseEffect(() => {
  document.body.style.color = color;
  
  window.addEventListener('keydown', handleEnter);
  
  return () => {
    window.removeEventListener('keydown', handleEnter);
  };
}, [color]);