[6분] useEffect

useEffect는 렌더링 후에, 컴포넌트가 뭘 해야 하는지를 알려주는 부분 입니다. 렌더링이 되고 난 후에, 이 부분에 작성한 함수들이 실행이 되게 됩니다.

주로 이 영역을 통해서 API 콜을 하여 데이터를 받아오거나, 이벤트 리스너 같은 것들을 등록합니다.

아래처럼 말이죠.

const App = () => {
	const [someState, setSomeState] = useState("");
	useEffect(() => {
		axios.get('/user/12345')
	  .then(response => {
			//do something here such as setState
			setSomeState(response) //for instance,
		})
	}, [])

	const handleUserKeyPress = (evt) => {
		//do something here
	}

	useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);
	}, [])

	return <>
		<span>hello</span>
		<span>{someState}</span>
	</>
}

이렇게 하면

처음에 hello가 보이고, 그다음 api콜을 통해 정보를 받아온 다음 someState가 response값으로 업데이트 되면서 최종적으로 밑에서 보이게 됩니다.
또한, 병렬적으로 useEffect를 또 설치할 수도 있습니다. 여기서 윈도우에 리스닝 이벤트를 추가 했습니다. 한가지 문제가 있다면, 이상태로 다른 페이지를 간다면, 계속해서 keydown 리스너가 동작을 할겁니다. window 에 등록이 되는 거죠. 따라서 우리는 이 페이지 말고 다른 곧으로 갈때는 등록해둔 listener를 해지 할겁니다. 방법은 아래와 같습니다.

const handleUserKeyPress = (evt) => {
	//do something here
}

useEffect(() => {
  window.addEventListener('keydown', handleUserKeyPress);

	return () => {
    window.removeEventListener('keydown', handleUserKeyPress);
  };
}, [])

잘 확인해보시면, useEffect내에 등록과 해제가 둘다 작성 되어 있는 것을 볼 수 있습니다. return 부분에 함수형태

() => {something here}

이부분이 해당 페이지가 unmount될 때에 실행이 됩니다.

"또" 다른 예를 한 번 볼까요?

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  // Specify how to clean up after this effect:
  return function cleanup() {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, []);