[ReactJS] Preventing useEffect from running twice with a useRef

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

useEffect()

: 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook

 

useRef()

: React 컴포넌트에서 변수를 저장하고 관리하는 데 사용하는 도구

: 컴포넌트의 렌더링과 관련된 값의 변경에 영향을 받지 않음

 

 

useEffect() 내부에서 useState를 활용한 setState를 할 경우,

1. mount될 때 1번

2. state변경될 때 1번

총 2번(mount 1번 + 렌더링 1번)의 useEffect가 호출됨

 

이 때, Ref를 선언하고 isEffectedRef.current를 활용하여 변수의 현재 값을 가져와 false일 때만 useEffect가 실행되도록 제어할 수 있음

const isEffectedRef = useRef(false);
 
useEffect(() => {
    const effedtedFunc = () => {
    try {
        setData(data);
      } catch (error) {
        console.error(error);
      }
    };
 
    if (!isEffectedRef.current) {
      effedtedFunc();
      isEffectedRef.current = true;
      // setData의 영향을 받지 않아 1번만 effedtedFunc가 실행될 수 있도록 함
      // 이후에는 데이터가 변경되었으므로 더이상 setData에 따른 rendering이 일어나지 않음
 
    }
  }, []);