State LifeCycle

컴포넌트 생명주기

1.render(그리기)
2.componentDidMount(그리고 난뒤) ※주로 타이머기능!
3.componentDidUpdate(그리고 난 뒤 변경됬때)
4.componentWillUnmount(그리고 난뒤 사라질때)

초기 화면에 render가 진행-> componentDidMount에서 최초1회 실행 ->
componentDidUpdate 리렌더링 될때마다 실행 ->
componentWillUnmount 종료될때 실행.

class형

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

interface IPrev {
  count: number;
}
export default class index extends Component {
  inputRef = createRef<HTMLInputElement>();
  state = {
    count: 0,
  };

  // 화면이 render 되고 나서 딱 한번 실행되는 함수
  componentDidMount() {
    console.log("마운트됌");
    this.inputRef.current?.focus();

  }

  // 상태값이 바뀌면서 리렌더링이 될때 계속 그려짐
  componentDidUpdate() {
    console.log("수정되고 다시 그려짐");
  }

//컴포넌트 종료
  componentWillUnmount() {
    console.log("컴포넌트 사라짐!");

  }

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

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

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

useEffect에서 마지막 의존성 배열(useEffect(effect, []))=에
값을 넣어준다 -> componentDidMount() 와 동일한 역할
안넣어준다 -> componentDidUpdate()와 동일한 역할

useEffect안에 return을 준다 -> componentWillUnmount

함수형

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

export default function index() {
const [count, setCount] = useState(0);
const inputRef = useRef(null);
const Router = useRouter();

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

// DidMount와 WillUnmount를 합치기
useEffect(() => {
console.log("마운트됌");
inputRef.current?.focus();
return () => {
console.log("컴포넌트 사라짐");
};
}, []); // 즉 1회!

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

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

return (

<div>
  <input type="text" ref={inputRef}></input>
  <div>현재 카운트는:{count}</div>
  <button onClick={onClickCounter}> 카운트 올리기!</button>
  <button onClick={onClickMove}>
    나가기!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  </button>
</div>

);
}

Cycle icons created by Uniconlabs - Flaticon
reference : https://velog.io/@alsqjarlwkd/State-LifeCycle