[React] Hook 함수 중 useEffect()

⭐useEffect()⭐

---

함수 컴포넌트 내에서 side effects를 수행하도록 해준다. 

export default function MyComponent() {
  useEffect(() => {
    // Code here will run after *every* render
  }, []);
  return <div />;
}

즉, 컴포넌트가 렌더링될 때마다 React는 화면을 업데이트한 다음 내부의 코드를 실행한다.

이때, 두 가지 인자를 받는데

✅빈배열을 넣을 경우, componentDidMount 처럼 동작하게 된다.

✅빈배열을 넣지 않을 경우, componentDidMount + componentDidUpdate 처럼 동작한다.

 

export default function MyComponent(props) {
  const [state, setState] = useState(init);
  useEffect(() => {
    // Code here will run after *every* render
  }, [state, props.abc]);
  return <div />;
}

만일, 배열 안에 값을 넣을 경우에는 componentDidMount + 특정 값이 변경되었을 때에만 동작하는 componentDidUpdate 처럼 동작한다.

 

✍️❓그럼 componentWillUnmount 동작은 어떻게?

export default function MyComponent(props) {
  const [state, setState] = useState(init);
  useEffect(() => {
    return () => {
      cleanup
    }
  }, [state, props.abc]);
  return <div />;
}

다음과 같이 어떠한 함수를 리턴해주면 컴포넌트가 unmount 시에 리턴하는 함수를 실행하게된다.

 

이전 생명주기에서 사용한 클래스 Clock 컴포넌트를 이용하여 함수 컴포넌트로 변환시켜주었다.

export default function Clock() {
  const [date, setDate] = useState(new Date());
  
  function tick(){
    setDate(new Date());
  }
  
  useEffect(()=>{
    console.log("componentDidMount!");
    const timerId = setInterval(tick, 1000);
    
    return () => {
      console.log("componentWillUnmount!");
      clearInterval(timerId);
    }
  }, []);
  
  useEffect(()=>{
    console.log("componentDidUpdate!");
    console.log(date);
  }, [date])
  
  return (
     <>
       <h1>Hello!</h1>
       <h2>{date.toLocaleTimeString()}</h2>
     </>
  )
}

componentDidUpdate 메서드를 다시 따로 useEffect()로 빼주었는데 그 이유는 의존성 배열에 [date], 즉 date가 업데이트될때마다 setInterval 정의도 같이 일어나기 때문에 굉장히 비효율적이기 때문,,,!