React에서 mount, unmount될 때 state를 제어

React에서 컴포넌트가 Mount 되었을 경우에만 컨텍스트 실행할 수 있게 하자.

우리는 보통 React에서 useState로 이용해 state를 갱신한다.

정적으로 state를 갱신할 경우에는 아무런 문제가 되지 않지만 비동기 통신을 이용해서 state를 갱신하거나 할 경우에는 문제가 생길 수 있다.

예시를 들자면, 한 컴포넌트에서 데이터를 요청하는 비동기 통신이 5초마다 반복되는 상황이 있다.

이 상황에서 컴포넌트를 불러오고 setInterval 혹은 setTimeout으로 통신을 요청한다면 컴포넌트가 unmount 되었을때 요청이 계속 가고 state가 지속적으로 갱신이 되어 메모리 낭비가 발생할 수 있다.

우리는 이를 막기 위해 변수를 이용해서 mount, unmount 상황을 구별해 통신을 제어할 수 있다.

export default funciton MyComponent () {
	const [count, setCount] = useState(0);
	const [isMount, setIsMount] = useState(true);
	
	useEffect(() => {
		setIsMount(true);
		
		return () => {
			setIsMount(false);
		}
	}, [])
	
	useEffect(() => {
		const result = fakeApi('test');
		if (isMount) setCount(result)
	}, [])
	
	return (
		<div>{count}</div>
	)
}

위 코드 처럼 mount 여부에 따라 제어해서 state를 갱신할 수 있다.

setInterval, setTimeout도 마찬가지로 useEffect 에서 언마운트 시 clearTimeout 혹은 clearInterval를 통해서 꼭 해제해주어야 한다. 그렇지 않으면 컴포넌트가 언마운트 되어도 state는 갱신이 안되더라도 지속적으로 통신을 요청하기 때문에 비용이 낭비될 수 있다.