Lifecycle

컴포넌트는
1. 생성이 될 수도 있고 (전문용어로 mount)
2. 재렌더링이 될 수도 있고 (전문용어로 update)
3. 삭제가 될 수도 있다. (전문용어로 unmount)

컴포넌트의 Lifecycle을 알아야하는 이유는 중간중간 간섭을 할 수 있기 때문이다.

import {useState, useEffect} from 'react';

function Detail(){

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

useEffect(callback function)을 사용하면 된다.

useEffect는 html이 다 렌더링이 되고 난 후에 실행이된다.

그러면 언제 사용하는지 알아야한다.

function Detail(){

  useEffect(()=>{
    (반복문 10억번 돌리는 코드)
  });
  
  return (생략)
}

예를들어 이런 코드가 있다면, 렌더링이 되기까지 오래 걸릴 수도 있기 때문에 html을 먼저 렌더링한 후에 반복문 10억번을 돌리면 더 좋을 것이다.

function Detail(){

  let [alert, setAlert] = useState(true)
  useEffect(()=>{
    setTimeout(()=>{ setAlert(false) }, 2000)
  }, [])

  return (
  {
    alert == true
    ? <div className="alert alert-warning">
        2초이내 구매시 할인
      </div>
    : null
  }
  )
}

useEffect에 []로 파라미터를 하나 넣을 수 있다.
그러면 []안에 있는 변수나 state가 변할 때만 useEffect안의 코드를 실행해준다.

[]안에 아무것도 넣지 않으면 mount시 1회만 실행하고 다시는 실행하지 않는다.