'리액트 useEffect'에 해당되는 글 1건

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;