[React]LifeCycle , useEffect

안녕하세요 오늘은 React의 LifeCycle과 useEffect에 대해서 정리하겠습니다.

1. LifeCycle
앞서 정리했던 Component는 LifeCycle(생명주기)가 있습니다.
1) 생성 (mount)
2) 재랜더링 (update)
3) 삭제(페이지이동) (unmount) 
이 3가지 과정 중간중간에 코드실행을 할 수 있습니다.

이 코드실행을 3가지 과정에 훅(hook,갈고리)을 달아서 사용합니다.
이를 LifeCycle hook 이라고 부릅니다.

이를 사용하기 위한게 useEffect 입니다.

2. useEffect
1) 상단에 useEffect import
import { useEffect, useState } from 'react';

2) 컴포넌트 생성 후 안에 useEffect 사용

function Detail() {

useEffect(()=> {

    //컴포넌트 mount,update 시 마다 실행

    console.log('안녕');

  });

}

콘솔에 '안녕'이 잘 출력됩니다.

* useEffect는 html이 렌더링 된 이후에 동작합니다
* 많은 연산이 필요하거나 , 서버와 통신하여 데이터를 가져오는 작업이 긴 시간이 소요될 경우 등은 useEffect를 이용하면
html 렌더링 이후에 연산 및 작업이 이루어 지므로 사용자 입장에서 빠른 렌더링 작업으로 보입니다.
-> 코드의 실행시점을 조절할 수 있습니다
* 컴포넌트의 핵심 기능은 결국 html 렌더링임 !!

3) useEffect에 사용할 수 있는 파라미터

useEffect(()=> {

    },[]);

[] 파라미터 부분은 Dependency라고 부릅니다.
이 부분에는 변수나 state를 넣을 수 있습니다.
-> 변수나 state가 변경될 때 마다 실행됩니다.
1) Dependency가 비어있을 경우 : mount 될 때 1회 실행 
2) Dependency가 없을 경우 : mount,update 될 때 실행

4) clean up function
useEffect가 동작하기 전에 특정 코드를 실행하고 싶으면 
return ()=>{ 코드 } 안에 넣으면 됩니다.
기존 코드를 제거할 때 주로 사용합니다.
mount 될 때는 실행되지 않고 update, unmount(1회) 될 때만 실행 됩니다.

ex) 타이머 제거

useEffect(()=> {

    //생성 ,업데이트 될 때마다 실행됨

    let a = setTimeout(()=> { setDiv(false);  },2000);

   

    return ()=> {

      clearTimeout(a);

      console.log('clean up function');

    }

  });

기존에 있던 타이머 제거 후 콘솔 출력

5) 마무리 정리
- mount , 재렌더링마다 코드실행

useEffect(()=>{

    //실행할 코드

  });

 - mount시 1회 실행 가능

useEffect(()=>{

    //실행할 코드

  },[]);

 - useEffect 코드 실행 전에 항상 실행

useEffect(()=>{

    return ()=>{

      //실행할 코드

    }

  });

 - unmount 시 1회 실행

useEffect(()=>{

    return ()=>{

      //실행할 코드

    }

  }, []);

 - state가 바뀔 때만 실행

useEffect(()=>{

      //실행할 코드

  }, [state명]);