React) useEffect에 대해 알아보자

React를 다시 복습 중에 한번 정리가 필요한 것 같아서 글을 써 보려 한다. 

const App = () => {
  const [count, setCount] = useState(0);
  console.log("rendering");
  const add = () => {
    console.log("add");
    setCount(current => {
      return current+1
    });
  };
  const minus = () => {
    console.log("minus");
    setCount(current => {
      return current-1 
    });
  };

  useEffect(() => {
    console.log("component render");
    return () => {
      console.log("component end")
    }
  },[count])
  
  return (
    <div>
      <h1>The number is: {count}</h1>
      <button onClick={add}>Add</button>
      <button onClick={minus}>Minus</button>
    </div>
  );
}

간단한 count 코드를 작성했다. Add버튼을 누르면 숫자가 증가하고 Minus버튼을 누르면 값이 감소한다. 

Effect Hook을 사용하면 class 컴포넌트에서 사용하던 componentDidMount(), componentDidUpdate(), compoenntWillUnmount()를 대체할 수 있다. 

useEffect(<function>, <array>)

useEffect Hook은 React에게 컴포넌트가 랜더링 후 어떤 일을 수행해야하는지를 가르쳐준다. useEffect 내부의 함수를 effct라 하고 리액트는 이 effect를 DOM 업데이트를 수행한 후 불러낸다. 여기서 배열에 어떤 값을 넘기느냐, return 여부에 따라 effect가 실행되는 조건을 조절할 수 있다. 

useEffect(() => {
    console.log("component render");
  },[])

배열을 비워놓은 경우 처음 랜더링 후 component render 이라는 로그가 나타난 후 버튼을 눌러서 update를 시켜도 로그가 찍히지 않는 모습을 확인할 수 있다. 

  useEffect(() => {
    console.log("component render");
  },[count])

다음은 배열에 count를 넣어줬다. 이 뜻은 랜더링 시 count가 변경될 때 마다 effect를 실행한다는 뜻이다.  위와는 달리 랜더링 된 후 count가 변경되었으므로 effect가 실행되었음을 확인할 수 있다.

 useEffect(() => {
    console.log("component render");
    return ()=> {console.log("clean up")};
  },[count])

useEffect에서 return을 하는 경우 react는 effect를 정리(clean-up)한다. React는 컴포넌트가 마운트 해제되는 때에 정리를 실행하지만 effect는 렌더링이 실행될 때마다 실행되므로 React는 다음 차례의 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect를 정리한다. 로그를 확인하면 렌더링이 된 후 이전 렌더링에서 파생된 effect를 정리하고 다음 이펙트가 실행된것을 확인할 수 있다.

(+ 하지만 componentWillUnmount와는 조금 다르게 동작되는 것 같다. componentWillUnmount의 경우 컴포넌트가 마운트 해제되는 때에 실행되지만 useEffect의 경우 렌더링 될 때 마다 이전 effect를 정리한다. 어떤 차이가 발생하는지, 이점이 있는지에 대해서는 추가로 공부가 필요할 것 같다.)

참고자료 : https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React