[React] useEffect 최초 렌더링 무시하기

useEffect에 deps 배열에 특정 값을 넣으면, 다음의 2가지 경우에 useEffect 내의 콜백 함수가 실행된다.

1. 컴포넌트가 마운트 될 때
2. deps 배열 내의 값이 변경될 때

그러나 1의 경우에는 콜백 함수를 실행하지 않고, 2의 경우에만 콜백 함수를 실행해야 할 때도 있을 것이다.

 

그럴 때는 아래와 같이 isMounted라는 state를 선언하여 활용하면 된다.

const [isMounted, setIsMounted] = useState(false);

useEffect(() => {
    if (isMounted) {
      ~~
    } else {
      setIsMounted(true);
      ~~
    }
  }, [something]);

최초에는 isMounted가 false이므로 useEffect 내의 콜백함수 중 else 부분을 실행한다. 따라서 처음에는 실행하고 싶지 않은 부분은 if (isMounted) 내에 넣으면 된다.