Component-Lifecycle

LifeCycle

컴포넌트들은 모두 각자의 라이프 사이클을 가지고 있으며, 이 각각의 라이프 사이클에 대해 원하는 동작을 써 넣을 수 있다.
컴포넌트의 수명을 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질때 끝이난다.

ClassComponent-Lifecycle(클래스형 컴포넌트 생명 주기)

클래스형 컴포넌트일때 라이프 사이클을 조작할 수 있는 내장함수를 리액트에서 제공해준다.

render( ) : 화면을 그려준다.
componentDidMount( ) : 화면이 그려지고 뒤에 실행이 된다.
componentDidUpdate( ) : 화면이 그려지고 화면안에 어떠한 변경이 있을때 실행이 된다.
componentWillUnmount( ) : 컴포넌트가 사라질때 실행이 된다.

위에 내장함수를 코드로 작성할때 방법이다.

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

export default class CounterPage extends Component {
  componentDidMount() {
    console.log("!!!마운트!!!");
    this.inputRef.current?.focus();
  	}
    render() {
    <div>렌더</div>
    }
  }

위는 componentDidMount를 코드로 작성 했을때 이다.
특징으로는 렌더되고 나서 딱 한번만 실행이 된다.
화면에 새로 들어올때마다 사진을 보여주거나, input창에 포커스를 들어오게 하는 경우에 사용할 수 있다.

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

export default class CounterPage extends Component {
  componentDidUpdate() {
    console.log("수정되고 다시그려짐!!!!");
  }
    render() {
    <div>렌더</div>
    }
  }

componentDidUpdate의 코드 작성이다.
이 내장함수는 렌더가 될때마다 즉 화면에 어떠한 값이 변할때마다 작동한다.
하지만 처음 렌더가 될 때에는 실행이 되지 않는다.

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

export default class CounterPage extends Component {
  componentWillUnmount() {
    console.log("컴포넌트 사라짐!!!!!!!");
  }
    render() {
    <div>렌더</div>
    }
  }

componentWillUnmount의 코드 작성이다.
componentWillUnmount는 컴포넌트가 사라지고 나서 실행이 된다.
만약 어떠한 컴포넌트가 API요청을 지속적으로 할 때 만약 이 컴포넌트를 나가기 버튼 이외에 방법으로 나간다면 그 컴포넌트는 지속적으로 API를 요청을 하게 될 것이다.
그런 불필요한 데이터 낭비를 막을때 사용할 수 있다.
즉 나가기 버튼말고 다른 방법으로 나갔다면 컴포넌트가 사라졌기에 API 요청 같은것도 같이 끝낼줄수 있게 되는것 이다.

FunctionComponent-Lifecycle(함수형 컴포넌트 생명 주기)

함수형 컴포넌트일때에는 클래스형과는 많이 다르다.
리액트에서 제공해주는 훅스인 useEffect를 사용한다.
useEffect에 대한 자세한 내용은 다음에 포스팅하고 오늘은 사용법만 간단하게 알아볼것 이다.

import { useEffect } from "react";

export default function CounterPage() {

 useEffect(() => {
   console.log("마운트됨!!");
   inputRef.current?.focus();
 }, []);
 
  return (
      <div>렌더</div>
  );
}

위 코드는 클래스형 컴포넌트의 didmount와 완전히 똑같은 동작을 하는 코드이다.
제일 처음 실행이 된다.

import { useEffect } from "react";

export default function CounterPage() {

  // 1
  useEffect(() => {
    console.log("수정되고 다시 그려짐");
  });
  
  // 2
  useEffect(() => {
    console.log("수정되고 다시 그려짐");
  }[any]);
 
  return (
      <div>렌더</div>
  );
}

위 코드는 클래스형 컴포넌트의 didupdate와 똑같은 동작을 하는데 하나 다른점으로는 제일 처음 실행이 된다는 점이다.
그 이외에는 완전히 똑같이 동작한다.
추가로 두 번째로 작성된 useEffect에는 뒤에 배열이 들어가는데 이는 의존성 배열이라 하고 안에 어떠한 변수를 담으면 그 변수가 바뀔때마다 렌더를 하게 해준다.
아무것도 넣지 않으면 didmount 처럼 한 번만 실행이 된다.
didupdate로 사용하고 싶다면 의존성 배열을 빈값도 아닌 작성을 하지 않으면 된다.

import { useEffect } from "react";

export default function CounterPage() {

 useEffect(() => {
   return () => {
     console.log("컴포넌트 사라짐!!!!!!!");
   };
 }, []);

  return (
      <div>렌더</div>
  );
}

위는 클래스형 컴포넌트의 willunmount와 완전히 똑같이 작동한다.
사용하는 경우 또한 똑같다.
useEffect에 자세한 내용은 따로 포스팅을 할 것 이다.