React) Lifecyle 인생과 useEffect 간섭

Lifecyle

component 에게도 인생이 있다..
무슨 말이냐면,

1. 생성되고 (mount)
2. 업데이트도 되고 (update)
3. 필요없어지면 소멸되고 (unmount)

우리는 이 각각의 지점에 고리를 걸어 간섭,
즉 어떤 기능을 실행시킬 수 있다.
이런 고리를 hook 이라 하는데
이렇게 lifecycle에서 쓰이는 고리가 useEffect이다.

---

useEffect

기본 사용법

import {useState, useEffect} from 'react';

function Component(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });
  
  return (생략)
}

실행조건 추가

1. 최초 mount 시에만 1회 실행

useEffect(()=>{ 실행할코드 }, [])

2. []안의 변수, state 가 변할 때 만 실행

useEffect(()=>{ 실행할코드 }, [count])

실행 전 청소 clean up function

useEffect(()=>{ 
  그 다음 실행됨 
  return ()=>{
    여기있는게 먼저실행됨. 실행문 오기전 청소
  }
}, [count])

쓰임새

근데 굳이 왜 저렇게 고리를 걸어서 짤까?

컴포넌트의 핵심 기능은 html 렌더링이라
렌더링을 목적으로 하지않는 기능들은 useEffect 안에 적으라는 뜻이된다.
(그래서 사실 이름도 sideeffect에서 옴)
그래서 주로,

1. 오래걸리는 반복연산
2. 서버에서 데이터가져오는 작업
3. 타이머달기

이런 일단 컴포넌트가 렌더링 된 뒤 실행되도 되는 부가적인 스크립트들을 useEffect 안에 많이 적는다.

---

• 예시코드 1
  useEffect로 타이머함수를 실행해보기.
  useEffect() setTimeout()

import { useState, useEffect } from "react";

function Detail(){
   
    let [alert, setAlert] = useState(true); //state로 동적ui제어
    useEffect(()=>{
        setTimeout(()=>{ setAlert(false) },2000) //타이머 걸기 - useEffect
    },[]) //mount시 최초 1회만 실행

    return(
        <div className="container">
                     
            { //state값 true || false에 따라 렌더링
                alert === true 
                ? <div className="alert-box">2초 뒤 사라지는 쿠폰</div>
                : null
            }

##코드해설
Detail이라는 component안에서 alert-box라는 ui를 동적으로 제어하기 위해 state를 개설, 
true || false값을 갖게하며 스위치처럼 사용했다. 
그리고 useEffect로 타이머를 만들어 
2초 뒤에는 alert값을 false값으로 변경, ui를 사라지게한다. 

• 예시코드 2
  useEffect로 타이머함수를 최초 mount될 때만 실행시키고
  그 전에 혹시 있을지 모를 기존 타이머를 모두 삭제해주는 청소스크립트 달기
  useEffect(()=>{},[]) setTimeout() return()=>{}

useEffect(()=>{ 
  let a = setTimeout(()=>{ setAlert(false) }, 2000)
  
  return ()=>{  //실행문 전 실행되는 청소 스크립트달기
    clearTimeout(a)
  }
}, [])

##코드해설
1. 청소해주고
return ()=>{  //실행문 전 실행되는 청소 스크립트
    clearTimeout(a)
  }
2. 타이머 함수 실행  
let a = setTimeout(()=>{ setAlert(false) }, 2000) 

useEffect(()=>{},[])에 쓰인 []dependency로 해당 useEffect는 mount시 한 번만 실행된다.