[React] useEffect 처음 마운트 함수 실행 막기

useEffect는 특정 state들을 감시하며 state의 값이 바뀐 경우 callBack 함수를 실행 시키도록 하는 React Hook이다.

 

const [age, setAge] = setState(15);

useEffect(()=>{
	console.log("age is ", d)
},[age])

 

위 같은 경우에는 age의 값이 변할 때마다 콘솔에 age의 값이 출력된다. 근데 useEffect에 deps부분이 [] 이렇게 비어있으면 처음 마운트때만 콜백함수가 실행되고 이후에는 실행되지 않는다. 근데 [age] 이런 식으로 되어있지만 첫 마운트때 콜백 함수를 실행시키고 싶지 않다면 어떻게 해야할까?

 

그럴 때는 커스텀 useEffect를 만들어서 사용해야 한다.

 

import { useEffect, useRef } from 'react';

const useDidMountEffect = (func, deps) => {
  const didMount = useRef(false);

  useEffect(() => {
    if (didMount.current) func();
    else didMount.current = true;
  }, deps);
};

export default useDidMountEffect;

import React, { useState, useEffect } from 'react';

import useDidMountEffect from '../path/to/useDidMountEffect';

const MyComponent = (props) => {    
    const [state, setState] = useState({
        key: false
    });    

    useDidMountEffect(() => {
        // react please run me if 'key' changes, but not on initial render
    }, [state.key]);    

    return (
        <div>
             ...
        </div>
    );
}

useDidMountEffect를 사용하면 첫 마운트에 콜백 함수를 실행시키지 않을 수 있다. 

 

stackoverflow에서 방법을 찾았는데 코드를 보면서 의아했던 부분이 있었다. useRef의 역할이다. 

여기서 왜 그냥 useState나 변수를 사용하면 되지 왜 useRef를 사용한 건지 의문이 가졌다.

그래서 찾아본 결과, 먼저 변수를 사용하면 렌더링이 될 때마다 새로운 변수가 생성이 되고 그러면 참조값이 항상 다르게 된다. 그렇기 때문에 변수를 사용하면 안되고 useState를 사용하지 않는 이유는 useState는 비동기적으로 동작하기 때문이다. 그래서 동기적으로 동작하는 useRef를 통해서 didMount를 관리하는게 베스트인 것 같다.(현재로써는... ㅎㅎㅎ)

++ useRef의 특징

• useRef는 함수형 컴포넌트에서 "참조(reference)"를 생성하고 유지하는 데 사용됩니다.
• useRef로 생성된 참조는 리렌더링과 상관없이 항상 동일한 객체를 유지합니다.
• useRef로 생성된 객체의 current 속성을 통해 현재 값을 읽거나 변경할 수 있습니다.

 

 

 

## Reference

https://stackoverflow.com/questions/53253940/make-react-useeffect-hook-not-run-on-initial-render/63776262#63776262