컴포넌트 생명주기

react에서 모든 컴포넌트는 여러 종류의 생명주기 메서드를 가진다. 우리는 이 메서드를 이용해 특정 시점에 코드가 실행되도록 설정할 수 있다.

컴포넌트의 수명은 페이지에 렌더링되기 전 준비단계부터 시작하여 컴포넌트가 페이지에서 사라질때까지이다.

클래스형

1. componentDidMount()

렌더링이 완료된 후에 한번 실행되는 메서드.
이 메소드는 라이브러리 또는 함수 호출, 이벤트 등록, setTimeout, 네트워크 요청 등의 비동기 작업을 처리하기에 적절하다.

2. componentDidUpdate()

컴포넌트 업데이트가 완료된 후에 실행되는 메서드.

3. componentWillUnmount()

컴포넌트가 제거될 때 실행되는 메서드.
컴포넌트가 사라지기 전에 마지막으로 작업을 처리하는 메서드로 리렌더링 되지 않는다.

import { Component } from "react";
import Router from "next/router";

export default class CounterPage extends Component {
  state = {
    count: 0,
  };

  componentDidMount() {
    console.log("마운트됨!!!");
  }

  componentDidUpdate() {
    console.log("수정되고 다시그려짐!!!");
  }

  componentWillUnmount() {
    console.log("컴포넌트 사라짐!!!");
    // 다른페이지로 이동
  }

  onClickCounter = () => {
    this.setState((prev) => ({
      count: prev.count + 1,
    }));
  };

  onClickMove() {
    Router.push("/");
  }

  render() {
    return (
      <div>
        <div>현재카운트: {this.state.count}</div>
        <button onClick={this.onClickCounter}>카운트 올리기!!!</button>
        <button onClick={this.onClickMove}>나가기!!!</button>
      </div>
    );
  }
}

클래스형의 경우 render() 메소드와 extends component 사용
render() 메서드는 반드시 구현되어야 한다.

함수형

함수형 컴포넌트의 경우 React Hook의 useEffect를 이용하여 간편하게 구현할 수 있다.

1.

useEffect(() => {
    // 코드
}, [])

렌더링이 완료된 후에 한번 실행되는 메서드. (deps 위치에 빈배열을 넣음)
두 번째 피라미터 배열(deps)을 생략하게 되면 리렌더링 시 매번 실행된다.

2.

useEffect(() => {
    // 코드
}, [props명, state명, ...])

컴포넌트 업데이트가 완료된 후에 실행되는 메서드.
두 번째 피라미터 배열(deps)영역에 명시한 변수가 변하면 실행된다. => 의존성 배열

3.

useEffect(() => {
    // 코드

    return () => {
        // 코드(claen up 함수)
    }
}, [props명, state명, ...])

컴포넌트가 제거될 때 실행되는 메서드.
두 번째 피라미터(deps)영역에 빈 배열을 넣게 되면 언마운트 될 때만 clean up 함수가 실행된다.
특정 값이 업데이트 되기 전에 clean up 함수를 실행시키는 경우 두 번째 피라미터 배열(deps)영역에 특정 값을 넣어주면 된다.

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

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

  useEffect(() => {
    console.log("마운트됨!!!");
  }, []);

  useEffect(() => {
    console.log("수정되고 다시그려짐!!!");
  }); 

  useEffect(() => {
    return () => {
      console.log("컴포넌트 사라짐!!!");
    };
  }, []);

  const onClickCounter = () => {
    setCount((prev) => prev + 1);
  };

  const onClickMove = () => {
    router.push("/");
  };

  return (
    <div>
      <div>현재카운트: {count}</div>
      <button onClick={onClickCounter}>카운트 올리기!!!</button>
      <button onClick={onClickMove}>나가기!!!</button>
    </div>
  );
}

함수형의 경우 React Hook 사용

주의

함수형의 경우 state 변수의 값을 바꿔주는 set변수를 useEffact안에 선언하게 되면 불필요한 추가 렌더링이 발생하므로 피하는 것이 좋다.

useEffect(() => {
    setCount((prev) => prev + 1);
  }, []);