클래스형 컴포넌트(Class Component)의 생명주기, 함수형 컴포넌트(Functional Component)의 생명주기

모든 컴포넌트는 여러 종류의 '생명주기 메서드'를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다.

모든 리액트 컴포넌트에는 라이프사이클이 존재한다.

---

- 클래스형 컴포넌트(Class Component) -
그리기 : render
그려지고 난 뒤 : componentDidMount
그려지고 난 뒤 변경됐을 때: conponentDidUpdate (많이 사용하진 않는다고 함)
그려지고 난 뒤 사라질 때 : conponentWillUnmount

---

- 함수형 컴포넌트(Functional Component) -
함수형 컴포넌트는
componentDidMount => useEffect(() => {}, [])
conponentDidUpdate => useEffect()
conponentWillUnmount => useEffect(() => {}, []) 안 return () => {};를 사용한다.
를 사용하며 자세한건 아래의 예시를 보자.

---

클래스형 예시

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

interface IState {
  count: number;
}

export default class ClassCounterPage extends Component {
  inputRef = createRef<HTMLInputElement>();
  // createRef는 react에서 제공하는 기능

  state = {
    count: 0,
  };

  componentDidMount() {
    console.log("마운트 됨");
    this.inputRef.current?.focus(); // input에 커서가 깜빡 거리게 됨
  }

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

  componentWillUnmount() {
    console.log("여기서 나갈래요");
  }

  onClickCounter = () => {
    console.log(this.state.count);
    this.setState((prev: IState) => ({
      count: prev.count + 1,
    }));
    console.log("카운터를 클릭하셨습니다.");
  };

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

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

함수형 예시

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

export default function FunctionLifeCycleRefPage() {
  const router = useRouter();
  const inputRef = useRef<HTMLInputElement>(null);

  const [count, setCount] = useState(0);

  // componentDidMount와 동일
  useEffect(() => {
    console.log("마운트 됨");
    inputRef.current?.focus(); // input에 커서가 깜빡거림

    // componentWillUnmount 동일
    return () => {
      console.log("여기서 나갈래요");
    };
  }, []); // []는 의존성 배열

  // componentDidUpdate와 비슷(동일하지 않음. 1%가 다름)
  useEffect(() => {
    console.log("수정되고 다시 그려짐");
    // 카운트 올리기 버튼을 누르면 reFresh됨
    // 렌더 될때도 실행됨
  });


  const onClickCounter = () => {
    console.log(count);
    setCount((prev) => prev + 1);
    console.log("카운터를 클릭하셨습니다.");
  };

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

  console.log("나는 언제 실행되냐");

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

count가 바뀌었을 때 reRender가 되게끔 하고 싶을 때 ↓↓↓↓

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

---

useRef createRef는 리액트에서 DOM을 선택해 직접 접근하기 위해 사용된다.

input에 focus()를 사용하여 렌더링 될때 커서가 깜빡이도록 한다. (그 외에도 여러 기능..)

createRef

클래스형 컴포넌트에서 사용된다.

useRef

함수형 컴포넌트에서 사용되며 DOM API를 이용한 컴포넌트 제어 대신 ref라는 기능을 제공한다. .current 프로퍼티로 변경 가능한 ref 객체를 반환한다.
(함수형에서 createRef를 사용하게 되면 해당 함수를 리렌더링 마다 다시 실행한다.)