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

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

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

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

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

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

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

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

다음은 컴포넌트입니다. 페이지의 아무 곳이나 클릭하면 이 컴포넌트의 배경색이 변경되도록 만드세요.

클릭하면 블록이 나타나는 링크를 만드세요. 또한, 브라우저 창의 아무 곳이나 클릭하면 우리의 블록이 숨겨지도록 만드세요.