'react 생명주기'에 해당되는 글 2건

hooks 방식의 컴포넌트 생명 주기

# 맨 아래의 전체 소스 코드가 있습니다.

# 클래식 방식의 컴포넌트 주기 : minaminaworld.tistory.com/196

# Hooks 방식의 경우, Class와는 다르게 componentDidMount, componentDidUpdate, componentWillUnmount 처럼 명확하게 나누어져 있지 않음. 그러나 useEffect만으로 구현이 가능함.

 // class 방식의 componentDidMout
  useEffect(() => {
    console.log('componentDidMout -------------------------');
    console.log('component가 실행될 때만 동작합니다.');
    console.log(' ------------------------- componentDidMout');
  }, []);

  // class 방식의 componentDidUpdate 동작
  // 배열 요소의 변경이 있을 때만 동작함
  useEffect(() => {
    console.log('componentDidUpdate -------------------------');
    // 값의 변화에 대응
    if (num) {
      console.log('num=', num);
    }
    console.log('-------------------------componentDidUpdate ');
  }, [num]);

  // class 방식의 componentDidUpdate 동작
  // 배열 요소의 변경이 있을 때만 동작함
  useEffect(() => {
    return () => {
      console.log('componentWillUnmount-------------------------');
      console.log('componentWillUnmount 동작함');
      console.log('-------------------------componentWillUnmount ');
    };
  }, [num]);

# 컴포넌트 시작 시 useEffect 실행.

# 값 변화로 인한 useEffect 실행.

# 값 변화로 인한 DOM의 종료로 인한 useEffect 실행.

# 전체소스코드

import React, { memo, useEffect, useState } from "react";

const useEffectTest = () => {
  const [title, setTitle] = useState("ComponentMountTest");
  const [num, setNum] = useState(0);

  // class 방식의 componentDidMout
  useEffect(() => {
    console.log('componentDidMout -------------------------');
    console.log('component가 실행될 때만 동작합니다.');
    console.log(' ------------------------- componentDidMout');
  }, []);

  // class 방식의 componentDidUpdate 동작
  // 배열 요소의 변경이 있을 때만 동작함
  useEffect(() => {
    console.log('componentDidUpdate -------------------------');
    // 값의 변화에 대응
    if (num) {
      console.log('num=', num);
    }
    console.log('-------------------------componentDidUpdate ');
  }, [num]);

  // class 방식의 componentDidUpdate 동작
  // 배열 요소의 변경이 있을 때만 동작함
  useEffect(() => {
    return () => {
      console.log('componentWillUnmount-------------------------');
      console.log('componentWillUnmount 동작함');
      console.log('-------------------------componentWillUnmount ');
    };
  }, [num]);

  const onIncreseNum = () => {
    console.log("onIncreseNum");
    setNum((prevNum) => {
      return prevNum + 1;
    });
  };

  const onDecreseNum = (sign) => (e) => {
    console.log("onDecreseNum");
    console.log(`sign ${sign}`);
    setNum((prevNum) => {
      return prevNum - 1;
    });
  };

  return (
    <>
      <h1>{title}</h1>
      <h1>{num}</h1>
      <button onClick={onIncreseNum}>+</button>
      <button onClick={onDecreseNum('-')}>-</button>
    </>
  );
};

export default useEffectTest;

class 방식의 컴포넌트 생명 주기

# 맨 아래의 전체 소스 코드가 있습니다.

 # 리액트 공식문서 : https://ko.reactjs.org/docs/react-component.html

# componentDidMount

 - 컴포넌트 시작시 실행됨.

    /*
        * 마운트 
            - 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출
        1. constructor()
        2. static getDerivedStateFromProps()
        3. render()
        4. componentDidMount
    */
    componentDidMount(){
        console.log('componentDidMount');
        console.log(arguments);
        console.log('컴포넌트가 처음 실행시 동작함');
    }

# componentDidUpdate

 /*
        https://ko.reactjs.org/docs/react-component.html
        * 업데이트
            - props 또는 state가 변경되면 갱신이 발생.
        1. static getDerivedStateFromProps()
        2. shouldComponentUpdata()
        3. render()
        4. 
    */
    componentDidUpdate(prevProps, prevState, snapshot){
        console.log('componentDidUpdate=======================');
        console.log(arguments);
        console.log("prevProps" , prevProps);
        console.log("prevState" , prevState);
        console.log("snapshot"  , snapshot);
        console.log('=======================componentDidUpdate');
    }

# componentWillUnmount

 - 파일 갱신으로 인한 componetDidMound 확인하기(Hot-loader module로 업데이트됨.)

    /*
        - 컴포넌트가 DOM 상에서 제거될 때에 호출됩니다.
    */
    componentWillUnmount(){
        // 화면이 끝나기전에 실행이됨.
        console.log('componentWillUnmount=======================');
        console.log(arguments);
        console.log('=======================componentWillUnmount');
    }

# 전체소스코드

import React, { Component } from 'react';


class ComponentMountTest extends Component{
    state = {
        title : 'ComponentMountTest',
        num : 0
    }; 

    /*
        * 마운트 
            - 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출
        1. constructor()
        2. static getDerivedStateFromProps()
        3. render()
        4. componentDidMount
    */
    componentDidMount(){
        console.log('componentDidMount');
        console.log(arguments);
        console.log('컴포넌트가 처음 실행시 동작함');
        console.log('aaa');
    }

    /*
        https://ko.reactjs.org/docs/react-component.html
        * 업데이트
            - props 또는 state가 변경되면 갱신이 발생.
        1. static getDerivedStateFromProps()
        2. shouldComponentUpdata()
        3. render()
        4. 
    */
    componentDidUpdate(prevProps, prevState, snapshot){
        console.log('componentDidUpdate=======================');
        console.log(arguments);
        console.log("prevProps" , prevProps);
        console.log("prevState" , prevState);
        console.log("snapshot"  , snapshot);
        console.log('=======================componentDidUpdate');
    }

    /*
        - 컴포넌트가 DOM 상에서 제거될 때에 호출됩니다.
    */
    componentWillUnmount(){
        // 화면이 끝나기전에 실행이됨.
        console.log('componentWillUnmount=======================');
        console.log(arguments);
        console.log('=======================componentWillUnmount');
    }

    onIncreseNum = () =>{
        this.setState((prev)=>{
            return {
                num : prev.num + 1
            } 
        })
    }

    onDecreseNum = () =>{
        this.setState((prev)=>{
            return {
                num : prev.num - 1
            } 
        })
    }

    render(){
        const {title, num} = this.state;
        return(
            <>
                <h1>{title}</h1>
                <h1>{num}</h1>
                <button onClick={this.onIncreseNum}>+</button>
                <button onClick={this.onDecreseNum}>-</button>
            </>
        )
    }

}

export default ComponentMountTest;