Lifecycle과 useEffect

Lifecycle과 useEffect가 뭔데

 

컴포넌트에도 Lifecycle이라는 개념이 있다.

 

컴포넌트는

1. 생성이 될 수도 있고 (전문용어로 mount)

2. 재렌더링이 될 수도 있고 (전문용어로 update)

3. 삭제가 될 수도 있다. (전문용어로 unmount)

 

이걸 왜 배우냐면

생성될 때 실행되는 코드

재렌더링될 때 실행되는 코드

삭제될 때 실행되는 코드

를 설정할 수 있기 때문이다. (이런 코드를 Lifecycle hook이라고 한다.)

 

또한 useEffect는 컴포넌트안의 html를 렌더링 이후에 동작한다. 

그래서 화면에 빨리 뜨게 설정도 가능하다.

그니깐 useEffect는 나중에 실행되도 괜찮은 쓸데없는 것들을 넣어놓는 역할도 한다.

// 겁나 느리게 html 렌더링된다.
function Detail(){

  (반복문 10억번 돌리는 코드)
  return (생략)
}

// 우선 html렌더링 되고나서 돌린다.
function Detail(){

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

 

사용법

재렌더링마다 코드 실행

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

 

컴포넌트 mount (생성)시 1회만 실행

딱 처음에만 실행

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

 

useEffect 코드실행전 항상 실행(clean up function)

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
})

 

이런 걸 어디다 쓰냐면 코드를 깨끗하게 청소를 하기 위해 사용된다. (이게 뭔 소리냐면)

useEffect(()=>{
    setTimeout(()=>{ setAlert(false) }, 2000)
  })

setTimeout이라는 함수가 있는데 이건 타이머 기능을 한다.

재렌더링마다 setTimeout이 실행되면 타이머가 무수히 많이 많이 생긴다.

 

useEffect(()=>{ 
  let a = setTimeout(()=>{ setAlert(false) }, 2000)
  return ()=>{
    clearTimeout(a)
  }
}, [])

그래서 return안에 clearTimeout이라는 함수를 통해서 나머지 타이머를 싹 다 없애고 다시 타이머를 돌게 할 수 있다.

 

useEffect 코드실행 전 1회만 실행

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

 

 

무언가 변경될 때만 실행

 state1이 변경될 때만 실행

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

 

 

 

옛날 class 문법에서의 lifecycle

class Detail2 extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 로드되고나서 실행할 코드
  }
  componentDidUpdate(){
    //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 삭제되기전에 실행할 코드
  }
}