Class

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

• 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

React는 컴포넌트 단위로 개발하며, 각 컴포넌트는 생성, 업데이트, 소멸로 이어지는 생명주기를 가집니다. 클래스형 컴포넌트는 생명주기 메서드로 컴포넌트를 조작하고, 함수형 컴포넌트는 생명주기 메서드가 없기 때문에 React Hook으로 비슷하게 구현합니다. 출처 : 리액트의 라이프사이클(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를 넣게되면 무한루프에 걸림