Component Life cycle

기본개념

컴포넌트의 생명주기

* mount 페이지에 장착됨 : 컴포넌트 로드될때 사용

* update 업데이트됨 : 컴포넌트 업데이트될때 사용

* unmount 필요없을때 제거됨 : 컴포넌트 삭제될때, 다른페이지로 넘어갈때

 

과거 class로 만든 컴포넌트일때는 ComonentDidMount(), ComonentDidUpdate(), ComonentWillUnmount와같은 함수를 사용했다고한다.

이제는 useEffect훅으로 컴포넌트의 생명주기에 따른 조종이 가능하다.

 

마운트, 재랜더링될때마다 실행하고싶을때

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    로드될때(mount), 업데이트될때마다 실행됨
    console.log('렌더링이 다된후에 출력(html,js,css)')
  });
  console.log('렌더링되지도않았는데 출력')
  //js에서는 위에서 아래로읽기때문에 오래걸리는 코드일경우 끝날때까지 렌더링이 걸린다. 
  하지만 useEffect안에 넣으면 렌더링이 다걸린다음에 하기때문에 좀더 효율적
  
  return (생략)
}

 

마운트때만 실행하고싶을때(1회)

useEffect(()=>{
	blabla
}
,[])

 

마운트 1번, 특정 state가 바뀔때마다 실행하고싶을때

const [test, setTest] = useState(true)
useEffect(()=>{
	blabla
}
,[test])

 

언마운트될때 딱1번 실행하고싶을때, 마운트시 기존코드 싹다지우고 새로운마음으로 하고싶을때

clean up function

useEffect(()=>{
 console.log(2)
 타이머
 데이터요청
 return () => {
 	//제일먼저 실행됨
    console.log(1)
    
 	//기존코드 싹다 지우고 새로운마음으로 하고싶을때 사용
    //기존타이머를 제거해주세요 clearTimeout()
    //기존데이터요청은 제거해주세요
 }
},[])