함수형 컴포넌트의 생명주기

Front-end React

함수형 컴포넌트 생명주기

useEffect()

useEffect()를 사용해 클래스 컴포넌트 생명주기의 기능들을 동시에 활용할 수 있다.

componentDidMount() equivalent

useEffect의 의존성 배열에 아무것도 넣지 않으면 Mount 시에만 렌더한 후 끝나게 된다.

useEffect(() => { 
  console.log("mount 후 실행")
},[])

componentDidUpdate() equivalent

의존성 배열을 부여하지 않으면 state 업데이트 시 무조건 다시 실행된다.

useEffect(() => { 
  console.log("업데이트 후 실행")
})

별도의 state 업데이트를 트래킹해서 변화가 있을 때 실행시키고 싶으면 의존성 배열에 해당 state를 넣는다.

useEffect(() => { 
  console.log("myState 업데이트 후 실행")
},[myState])

componentDidUpdate()와는 달리, 컴포넌트가 처음 렌더될 때에도 실행된다는 차이가 있다.

componentWillUnmount() equivalent

return()에 원하는 기능을 넣는다.

useEffect(() => { 
  return () => {
    console.log("unmount 이전 실행")
  }
})

예제

import {useEffect, useState} from "react";
import {useRouter} from "next/router";

export default function FunctionCounterPage() {
  const router = useRouter();
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("그려지고 나서 실행");
    return () => {
      console.log("사라질 때 실행");
    };
  }, []);
  
  useEffect(() => {
    console.log("변경되고 나서 실행");
  });
  
  return (
      <>
        <div>현재 카운터 : {this.state.count}</div>
        <button onClick={this.handleClickIncrement}>Increment</button>
        <button onClick={this.handleClickMovePage}>Exit to main page</button>
      </>
    );
}
  1. 해당 페이지에 들어가게 되면 
    그려지고 나서 실행
변경되고 나서 실행
  2. Increment 버튼을 클릭하면 
    변경되고 나서 실행
  3. Exit 버튼을 클릭하면 
    사라질 때 실행

    의 콘솔 로그 메세지가 찍힌다.