[React] Class , Lifecycle

Class

Class는 사실 "특별한 함수"입니다. 함수를 함수 표현식과 함수 선언으로 정의할 수 있듯이 class 문법도 class 표현식 and class 선언 두 가지 방법을 제공합니다.
MDN - Class

• class는 객체이자 물건 만드는 설명서에요.
• class안에는 함수와 변수를 넣을 수 있어요.
• 만들어진 클래스는 객체 또는 인스턴스라고 불러요.

class Date{
	//만드는 방법
	getFullYear() {
    	... 년도 추출 기능
    }
    getFullMonth() {
    	...	 월 추출 기능
    }
    getDate() {
    	...	 일 추출 기능
    }
}


const date = new Date()
date.getFullYear() 
date.getFullMonth()
date.getDate()

객체(객체지향프로그래밍 - OOP)
클래스는 내장객체라 불러요
객체를 묶어서 유지보수에 장점이 있어요

import { Component } from "react"; // 리엑트 classComponents를 사용하려면 필요해요

export default class ClassCounterPage extends Component {
  // 리엑트 ClassCounterPage에 Component를 상속 시키기
  state = {
    // state를 사용하려면 필요한 규칙 useState가 필요없어요 (Component에 들어가있어요)
    count: 0,
  };
  
  componentDidMount() {
    console.log("그려지고 나서 실행");
  }

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

  componentWillUnmount() {
    console.log("사라질때 실행");
  }

  onClickCountUp = () => {
    console.log(this.state.count);
    this.setState({
      count: 1,
    });
  };

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

  //   return { // 클래스에는 return이라는게 없어요 }
  render() {
    // 클래스형 컴포넌트에서는 render라는걸 사용해야해요
    // 그안에 return을 해야해요
    return (
      <>
        {/* this를 붙여야지만 class 내에서 사용 가능 */}
        <div>{this.state.count}</div>
        <button onClick={this.onClickCountUp}>카운트 올리기</button>
      </>
    );
  }
}

Lifecycle

리액트는 컴포넌트 단위로 개발하게 되는데 이때 각 컴포넌트들은 라이프사이클 즉, 생명주기를 가지고 있다. 생명주기는 생성부터 시작하여 업데이트가 되기도 하며 마지막에는 소멸되는 과정을 거치게 된다. 클래스형 컴포넌트에선 주로 생명주기 메서드를 통해 라이프사이클에 따라 컴포넌트를 조작하는데 이와 달리 함수형 컴포넌트에선 생명주기 메서드가 따로 존재하지 않기 때문에 리액트 훅을 사용하여 생명주기 메서드와 비슷하게 동작하도록 구현한다
출처 : 리액트의 라이프사이클(Life Cycle)에 대해 알아보자

출처 : React 생명주기 도표

Class

import { Component } from "react";

export default class ClassCounterPage extends Component {
  
  componentDidMount() {
    console.log("그려지고 나서 실행");
    // 처음 화면이 렌더링될떄 실행되요
  }

  componentDidUpdate() {
    console.log("변경되고 나서 실행");
    // 화면이 리렌더링될떄 실행되요
  }

  componentWillUnmount() {
    console.log("사라질때 실행");
    // 화면이 전환 혹은 사라질때 실행되요
  }
  
  render() {
    return (
      <>
        <div>Hello</div>
      </>
    );
  }
}

Function

함수형에서는 useEffect로 생명주기를 줘요

useEffect(() => {
    // 함수
    
    return () => {
    	// 종료시 함수
	}
},[의존성 배열 (dependency array)]);

useEffect에서는 의존성 배열이 중요해요

• [] 닫혀있다면 처음 렌더링되었을때만 실행이고
• [State] 스테이트의 값이 있다면 스테이트의 값을 감지해서 실행해요
• 아예 지워졌다면 모든 스테이트의 값을 감지해서 실행해요

import Router, { useRouter } from "next/router";

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

  useEffect(() => {
    console.log("그려지고 나서 실행!!");
    // componentDidMount
  }, []);

  useEffect(() => {
    console.log("변경되고 나서 실행!!"); // 그려지고나서도 실행이됌
    // componentDidUpdate
  }); // 의존성 배열이 없으면 뭐가 변경되든 실행 있으면 그 값이 변경되면  실행

  useEffect(() => {
    return () => {
      console.log("사라지고 나서 실행!!");
    };
    // componentWillUnmount
  }, []);

  console.log("실행 위치");
  const onClickCountUp = () => {
    console.log(count);
    setCount((prev) => prev + 1);
  };

  const onClickMove = () => {
    // void Router.push("/"); // 함수형에서는 Router는 작동하지 않음 useRouter를 통해서만 작동이 가능함
    void router.push("/");
  };

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

useEffect를 사용할때는 합칠수도있어요

  // 1. useEffect 사용법 =>  하나로 합치기 가능
  useEffect(() => {
    // 합치기
    console.log("그려지고 나서 실행!!");
    return () => {
      console.log("사라지고 나서 실행!!");
    };
  }, [count]);
  // useEffect는 다 그려지고나서 실행

아래와 같이 작성한다면 무한루프에 빠져서 계속 실행이 될테니 조심해주세요

  // 2. useEffect의 잘못된 사용법 => (1. 추가렌더링, 2. 무한루프)
  // useEffect(() => {
  //   setCount((prev) => prev + 1);
  //   // 가급적이면 useEffect에서 setState는 피하자
  // }, []); // 의존성 배열에 count를 넣게되면 무한루프에 걸림