useEffect

useEffect

리액트 hooks를 공부할 때 가장 많이 사용되는 훅은 아마도 useState일 것이고 그 다음 가장 많이 사용되는 훅은 useEffect일 것이다.

클래스형 컴포넌트와 달리 함수형 컴포넌트에서는 리액트 생명주기 함수를 사용할 수 없으므로 이를 대체하기 위해서 useEffect를 사용한다고 알고 있는데 useEffect를 언제 사용하는지 자세하게 정리 해본다.

언제 실행되는가

어떤 컴포넌트가 있다고 가정해보자. 이 컴포넌트는 렌더링 될 것이다. 단순히 렌더링 되는것이 아니라 렌더링 되는 과정을 보면
처음 컴포넌트가 렌더링되고(마운트) 그 안에서 상태 또는 props이 변경될 때마다 혹은 부모 컴포넌트의 변경이 있을 때마다 컴포넌트는 다시 렌더링 된다.(업데이트) 컴포넌트가 역할을 다 하고 나면 컴포넌트는 제거된다.(언마운트)

1. 컴포넌트가 Mount 될 때
2. 컴포넌트가 Update 될 때
3. 컴포넌트가 UnMount 될 때

useEffect는 기본적으로 2개의 인자를 전달 받는다. 필수적으로 콜백 함수를 전달 받아야하고, 선택 사항으로 의존성 배열을 전달한다.

useEffect(() => {
	// Working...
});

의존성 배열 없이 콜백 함수만 전달 했을 경우 useEffect의 콜백 함수는 렌더링 될 때마다 실행된다. 이렇게 사용하는 것은 사실상 의미가 없다

useEffect(() => {
  // Working...
},[value]);

useEffect(() => {
  // Working...
},[]);

일반적으로 많이 사용하는 경우다. 첫 번째의 경우 의존성 배열에 있는 value 값이 변경될 때마다(업데이트) 콜백 함수를 실행한다. 마지막 비어있는 의존성 배열의 경우 컴포넌트가 첫 번째 렌더링 됬을 때(마운트)만 실행된다.

Clean up

마지막으로 많이 사용해 본 경험은 없지만 useEffect에서 UnMount를 담당하는 Clean up에 대해서 알아본다.
간단하게 useEffect 내부에서 return 으로 함수를 전달하면 컴포넌트가 UnMount 될 때 실행된다.

// Timer 컴포넌트
import { useEffect } from "react";

const Timer = () => {
  useEffect(()=> {
    const timer = setInterval(() => {
      console.log("Timer Runnig...");
    },1000);

    return () => {
      clearInterval(timer);
      console.log("Timer End!");
    };
  },[]);
  return (
    <div>
    Timer Start!
    </div>
  )
}

export default Timer;

타이머 컴포넌트가 처음 렌더링 될 때 setInterval에 의해서 타이머가 실행된다. 그리고 만약 Timer 컴포넌트가 UnMount 된다면 clearInterval에 의해서 타이머가 종료된다.

Clean Up을 어떻게 활용할 수 있을지 잘 모르고 있었는데 이번 기회에 다시한번 짚어볼 수 있는 기회였다고 생각한다