[React] useEffect 시행 시기와 최적화

useEffect 작동

시행 시기

useEffect hook은 컴포넌트가 마운트 된 이후 작동하게 된다. React는 브라우저가 다 그려질 때까지 useEffect의 실행을 지연하게 된다.

이렇게 useEffect hook은 매번 마운트 될 때마다 useEffect에 전달된 함수가 모든 렌더링에서 새로 생성된다. 결과적으로 리렌더링하는 때마다 모두 이전과 다른 함수로 교체하여 전달된다. 이를 통해 우리는 useState의 count 값이 제대로 업데이트 되는지에 대한 걱정 없이 useEffect의 함수 내부에서 그 값을 읽을 수 있다.

내부 함수 비동기적 작동(feat. useLayoutEffect)

useEffect 안의 함수는 비동기적으로 작동하게 되며 이 때 동기적으로 함수를 만들고 싶다면 useLayoutEffect을 대신 사용해줄 수도 있다.

useLayoutEffect는 paint가 일어난 후 발생하는 useEffect와는 달리 브라우저 layout과 paint사이에 일어나게 된다.

내부 함수 정리 시점

useEffect(() => {
	firebaseOnSnapShotEvent = onSnapshot() //mount이후 발생 
  
  	return firbaseOnSnapshotEvent //unmount시에 시행된다. 
}, [])

React는 useEffect의 내부 함수를 컴포넌트가 unmount 때에 정리(clean-up)하게 된다. 함수는 한 번이 아니라 렌더링이 실행되는 때마다 실행되기 때문에, React가 다음 차례의 함수를 실행하기 전에 이전의 렌더링에서 파생된 함수를 정리한다.

따라서 이것은 버그를 방지하는 데에 도움이 된다.

useEffect가 선택한 성능 최적화

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 바뀔 때만 effect를 재실행합니다.

예를 들어 count가 6으로 업데이트된 뒤에 렌더링하면 React는 이전에 렌더링된 값 [5]를 그다음 렌더링 시의 [6]와 비교한다. 이때 5 !== 6 이기 때문에 React는 effect를 재실행한다. 배열 내에 여러 개의 값이 있다면 그중의 단 하나만 다를지라도 React는 effect를 재실행한다.

이런 로직을 통해 useEffect 는 dependency array에 특정 state가 변화할 때만 리렌더링 할 수 있게 설정할 수 있음으로써 성능을 최적화 해줄 수 있다.