클래스 컴포넌트 Lifecycle

클래스 컴포넌트는 리액트 훅을 사용할수 없기때문에 useEffect()를 사용할 수 없다.
하지만 클래스 컴포넌트는 Component Lifecycle이라는 개념이 존재한다.
모든 컴포넌트는 DOM에 렌더링되거나 DOM에서 삭제될 때 등의 생명주기를 가진다.
생명주기를 달리하여 클래스컴포넌트를 서로 다른 시점에 추가할 수 있다.

componentDidMount()

render() 같은 내장함수로 리액트에서 import 한 내장컴포넌트를 확장하여 사용할 수 있다.
컴포넌트가 마운틴 된 직후 = 컴포넌트가 평가되고 DOM에 렌더링 될 때 이 메소드를 호출하여 사용한다.
useEffect()를 사용한 것과 같다.

useEffect({} ,[])

 

componentDidUpdate()

컴포넌트가 update되면 호출된다. state가 변경되어 컴포넌트가 재평가, 재렌더링 될 때 호출된다.

useEffect({} , [변화를관찰할state])

 

componentWillUnmount()

컴포넌트는 DOM에서 삭제되기 직전에 호출되며 이것은 useEffect()의 cleanup 함수와 같다.
cleanup 함수는 컴포넌트가 DOM으로부터 삭제되기 직전, useEffect가 다시 실행되기 직전에 호출된다.
(DOM 첫 렌더링 => 클린업 => DOM 재 렌더링 => 클린업 => DOM 재 렌더링)

useEffect(() => { 
  return () => {}; 
});