[Hooks] 2 : useEffect

useEffect는 컴포넌트가 렌더링되고 난 직후마다 특정 작업을 실행하며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라집니다.

 

 

마운트될 때만 실행하고 싶을 때

useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 됩니다.

 

useEffect(() => {
	console.log('마운트될 때만 실행됩니다.');
}, []);

 

 

특정 값이 업데이트될 때만 실행하고 싶을 때

두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어 주면 됩니다.

 

useEffect(() => {
	console.log(name);
}, [name]);

 

 

뒷정리하기

useEffect는 종종 컴포넌트가 화면에서 제거될 때 이전의 렌더링에서 파생된 effect 또한 정리해야 하는 리소스를 만듭니다. 가령 구독이나 타이머 ID와 같은 것입니다. 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup) 함수를 반환해 주어야 합니다.

정리 함수는 메모리 누수 방지를 위해 UI에서 컴포넌트를 제거하기 전에 수행됩니다. 만약 컴포넌트가 (그냥 일반적으로 수행하는 것처럼) 여러 번 렌더링 된다면 다음 effect가 수행되기 전에 이전 effect는 정리됩니다. 아래 소스에서, 매 갱신마다 새로운 구독이 생성된다고 볼 수 있습니다. 

 

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
  };
});

 

clearInterval() 예제로 보면 더 이해가 빠를 것 같다.

 

useEffect(() => {
	setInterval(() => {
                
       }, 1000);
    }
    return {
       clearInterval();
    };
}, [trialViewerStatus]);

 

 

 

https://ko.reactjs.org/docs/hooks-reference.html#useeffect

Hooks API Reference – React

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko

[번역] useEffect 완벽 가이드