문제점

useEffect는 deps와 관계없이 컴포넌트가 첫 렌더링될 때 함께 실행된다.

import React, { useState, useEffect } from 'react';
import './style.css';

export default function App() {
  
  const [clicked, setClicked] = useState('');
  
  useEffect(() => {
    console.log('Clicked');
  }, [clicked]);
  return (
    <div>
    </div>
  );
}

코드 실행 결과

위의 코드에서 useEffect는 clicked state가 변경될 때 실행되어야 한다. 하지만 실제로 실행시켜보면 다른 결과가 보인다.

clicked를 변화시키는 어떠한 코드도 없음에도 useEffect의 사이드이펙트가 발생한다.
이렇게 개발자의 의도와 맞지않는 실행을 막기 위한 방법을 소개하겠다.

해결방법

useRef 훅

useRef훅은 리액트 기본 내장 훅이다.
값이 변해도 컴포넌트의 리렌더링이 일어나지 않고, 리렌더링이 일어나도 값이 유지되는 특징이 있다.
이 특징을 이용하여 첫 렌더링시 발생되는 사이드 이펙트를 막을 수 있다.

코드

import React, { useState, useEffect, useRef } from 'react';
import './style.css';

export default function App() {
  const [clicked, setClicked] = useState(false);
  const isMounted = useRef(false);
  useEffect(() => {
    if (isMounted.current) {
      console.log('Clicked');
    } else {
      isMounted.current = true;
    }
  }, [clicked]);
  return <div></div>;
}

처음 렌더링 될 때 isMounted의 값이 true로 바뀌고 그 후 deps배열에 있는 상태의 변화가 일어날 때 사이드 이펙트가 발생된다.