[React] useEffect 훅 사용 방법 정리 및 예제 코드

리액트에서 렌더링 과정 외에서 발생하는 작업인 사이드 이펙트를 처리할 수 있는 훅인

useEffect의 사용 방법을 예제 코드를 중심으로 간략하게 정리해보도록 하겠습니다.

 

 

useEffect 기본 예제

기본적으로 특정 변수의 값이 변경되었을 때마다

원하는 이펙트를 실행하게 하는 역할을 수행합니다.

 

예를 들어, MyVariable이라는 변수가 변경될 때마다

console.log의 이펙트 부분이 실행되는 예시는 다음과 같습니다.

useEffect(() => {
  console.log(`변수의 값이 ${MyVariable}로 변경되었습니다.`);
}, [MyVariable]);

 

위 코드를 함수 컴포넌트 내에 포함시켜주면,

해당 변수의 값이 바뀔 때마다 해당 로그가 출력되게 됩니다.

 

만일, 변수 여러 개에 의존성을 모두 걸어주고 싶다면 다음과 같이 지정하시면 됩니다.

useEffect(() => {
  console.log("MyVariable1, MyVariable2 중 변경된 값이 있습니다.");
}, [MyVariable1, MyVariable2]);

두 변수 중 하나라도 변경될 경우 console.log 함수에 해당하는 부분이 실행됩니다.

 

 

useEffect 특수 케이스

useEffect에서 만일 의존성에 해당하는 배열 부분을 빈 배열인 []로 지정한다면

이 때는 처음 렌더링될 때만 이펙트 부분이 실행됩니다.

useEffect(() => {
  console.log("컴포넌트가 최초로 렌더링되었습니다.");
}, []);

 

반면, 배열 부분을 아예 비우면 컴포넌트가 렌더링될 때마다

이펙트 부분이 지속적으로 실행됩니다.

useEffect(() => {
  console.log("컴포넌트가 또 렌더링되었습니다.");
});

 

 

useEffect 클린업(cleanup)

컴포넌트가 언마운트되는 경우에 정리 작업이 필요한 경우도 있습니다.

이러한 경우에는 useEffect 내 return 구문에서 원하는 작업을 추가로 지정하시면 됩니다.

 

예시 코드의 스니펫은 다음과 같습니다.

useEffect(() => {
  const timer = setInterval(() => {
    console.log("타이머 작동 중");
  }, 1000);

  return () => {
    clearInterval(timer); // 해당 부분이 cleanup에 해당하는 부분
  };
}, []);

 

만일, 위의 예시에서 의존성 배열 내의 특정 변수를 지정하게 되면

언마운트가 되는 경우뿐 아니라 update가 되기 직전에도 cleanup에 해당하는 부분의

코드가 실행되게 됩니다.

 

이 글이 혼동될 수 있는 useEffect의 사용 방법의 이해에 도움이 되셨기를 기원하겠습니다.

잘 봐주셔서 감사드립니다.