useEffect

useEffect

React Hook 에서 ComponentDidMount 와 ComponentDidupdate 와 같은 기능을 할 수 있게 해주는 api 다.
공식 홈페이지에서는 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋다고 한다.

참고 링크

https://ko.reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

사용예

const Test = () => {
  const [number, setCount] = React.useState(0);

  React.useEffect(() => {
   console.log('component did mount or update');
  });

  const foo = ()=>{
    console.log("foo data");
  }
  const data = foo(); //시점이 component did mount, update 랑 똑같음 ==> 부모 컴포넌트가 다시 렌더링 될때

    return (
      <div>
        {number}
        {console.log("render")}
      </div>
    );
};

위와 같이 사용하면 Test 컴포넌트가 mount 와 update 가 될 때마다 실행 된다.

useEffect 실행 조정

componentWillUnmount

만약에 userEffect 를 이용해 componentWillUnmount 같이 umount 될 때 동작을 지정하고 싶다면 아래와 같이 수정하면 된다.

 React.useEffect(() => {
   console.log('component did mount or update');
    return(()=>{
      console.log('unmunt');
    });
  });

위와 같이 함수를 반환하게 하면, effect가 clean-up(정리)작업을 할 때 수행된다.
(저렇게 반환 함수를 clean-up 함수라고도 부른다.)

react가 clean-up 하는 시점은?

리액트는 컴포넌트가 마운트 해제되는 때에 정리(clean-up)를 실행한다.
하지만 effect 함수는 컴포넌트가 렌더링 될 때마다 실행되기 때문에, effect 의 clean up 함수도 렌더링 될 때마다 실행된다.
이를 방지하는 방법은 아래 최적화 항목 참고

effect clean-up 은 왜 매 렌더링 때마다 실행될까

clean-up 작업은 주로 , 이전에 effect 에서 하는 작업을 해지 할때 사용한다.

내가 팔로우 하고 있는 친구목록을 props 에서 받아서 구독하는 행동을 ComponentDidMount 시점에만 걸어 놓는다면,
친구들 목록이 변경 되었을 때, 변경된 목록은 구독하지 못한다. (구독하는 행동을 컴포넌트 mount 시점에만 해놨으니까)
그래서 ComponentDidUpdate 에서 이전 친구목록을 구독 해지하고, props 에서 친구목록을 다시 받아 새로 구독해야 한다.

이 작업을 effect 를 쓰면 한 함수에서 모두 가능해진다.
React 공홈에서는 useEffect 가 위와 같은 실수들을 방지할 수 있다고 한다.

useEffect 최적화

컴포넌트가 update 될 때마다 매번 useEffect 를 실행시키는 작업이 불필요 한 경우도 있다.
이럴 때를 위해 react 는 방안을 다 마련해 놨다.

class 컴포넌트의 경우 ComponentDidUpdate 를 통해 특정 조건에서만 렌더링 할 수 있게 해주는데,
effect 도 이게 가능하다.

아래 예제는 공홈에서 가져온 것이다.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 바뀔 때만 effect를 재실행합니다.

그리고 이는 clean-up 을 사용하는 effect 에도 동등하게 적용된다.

useEffect(() => {
  document.title = `You clicked ${count} times`;
   return(()=>{
      console.log('unmunt');
    });
}, [count]); // count가 바뀔 때만 effect 를 재실행하고, clean-up 도 마찬가지다.

최적화 주의 사항 & 팁

만약에 useEffect 내에서 특정 값에 의존하지 않고, mount 시점에만 실행시키고 싶다면,
두번째 인자에 빈배열을 넣어주면 된다.

 React.useEffect(() => {
   console.log('component did mount or update');
    return(()=>{
      console.log('unmunt');
    });
  },[]);

그러나 useEffect 내에서 특정 값에 관련한 동작을 한다면, 그 값은 두번째 인자에 들어가야 한다.

잘못된 예

function Example({ someProp }) {
  function doSomething() {
    console.log(someProp);
  }

  useEffect(() => {
    doSomething();
  }, []); // doSomething 함수에서 someProp 을 사용하므로 안전하지 않다.
}

바른 예

function Example({ someProp }) {
  useEffect(() => {
    function doSomething() {
      console.log(someProp);
    }

    doSomething();
  }, [someProp]);
}