[React] state Life Cycle(생명주기)

State란 함수 내에 선언된 변수처럼 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 가진 객체를 말한다.

컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드 이다.
쉽게 말해, 특정 시점에 코드가 실행되도록 설정할 수 있다는 것이다.

클래스 컴포넌트 생명주기 예제

import Router from "next/router";
import { Component } from "react";
export default class ClassCounterPage extends Component {
  state = {
    count: 0,
  };

  componentDidMount() {
    console.log("그려지고 나서 실행!!");
  }

  componentDidUpdate() {
    console.log("변경되고 나서 실행!!");
  }

  componentWillUnmount() {
    console.log("사라질 때 실행!!");
    // ex) 채팅방 나가기 API
  }

  onClickCountUp = () => {
    // 화살표 함수도 가능! (function만 안쓰면 됨)
    console.log(this.state.count);
    this.setState({
      count: 1,
    });
  };

  onClickMove = () => {
    void Router.push("/");
  };
  render() {
    return (
      <>
        <div>{this.state.count}</div>
        <button onClick={this.onClickCountUp}>카운트 올리기!!</button>
        <button onClick={this.onClickMove}>나가기!!</button>
      </>
    );
  }
}

컴포넌트 클래스에서는 특별한 메서드를 선언하여 컴포넌트가 마운트되거나 언마운트 될 때 일부 코드를 작동시킬 수 있는데, 이런 메서드들을 “생명주기 메서드”라고 한다.

함수형 컴포넌트 생명주기 예제

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

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

  useEffect(() => {
    console.log("그려지고 나서 실행!");
  }, []); // 여기 있는 배열을 의존성 배열이라고 함!(dependency array)

  useEffect(() => {
    console.log("변경되고 나서 실행!");
  }); // 의존성 배열이 없으면 뭐라도 변경됐을 때 실행됨!

  useEffect(() => {
    return () => {
      console.log("사라질때 실행!");
    };
  }, []);

  const onClickCountUp = () => {
    // 화살표 함수도 가능! (function만 안쓰면 됨)
    console.log(count);
    setCount((prev) => prev + 1);
  };

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

  console.log("나는 언제 실행되게~?");

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

함수형 컴포넌트에서 생명주기 관련 훅은 바로 useEffect 이다!

의존성 배열[ ] , 중요한가?
→ YES!!
만일 까먹고 useEffect에 의존성 배열을 적어주지 않고 return 또한 해주지 않으셨다면, 무한렌더 지옥에 빠지게 될 것 이다.

또한, useEffect는 의존성 배열 인자에 따라 렌더가 달라지므로 의존성 배열을 잘다루는 것이 중요하다.
즉, 의존성 배열이 함수형 컴포넌트의 생명주기를 결정하는 포인트라고 봐도 무방하다!!

useEffect 안에서 setState의 사용
→useEffecrt 내에서 setState를 사용할때는 정말 필요한 경우가 아니라면 지양하는 것이 가장 좋다.
컴포넌트가 마운트된 이후에 setState를 적용하게 되면,
1. state가 변경되고,
2. 변경된 state로 컴포넌트가 다시그려지게(=리렌더) 된다.
즉, useEffecrt 내에서 setState를 사용하게 되면 불필요한 리렌더나 무한루프를 일으키게 되고 성능면에서 비효율적이게 된다.