useEffect(배경지식)

Lifecycle

컴포넌트는 mount(생성), update(재렌더링), unmount(삭제)의 과정을 거친다.

Lifecycle hook을 사용하면 앞의 과정 실행 전후로 특정 코드가 실행되게 할 수 있다.

 

useEffect 특징

function Detail(){
  //(반복문)
  return <div></div>
}

function Detail(){
  useEffect(()=>{
    //(반복문 코드)
  });
  
  return <div></div>
}

첫번째 코드는 반복문 실행 후 html을 return한다면, 두번째 코드는 html을 return한 후 반복문이 실행된다.

useEffect 안에 적은 코드는 html 렌더링 이후에 동작한다. 컴포넌트 핵심 기능인 html 렌더링 이외 부가적 기능

(ajax, setTimeout, 오래걸리는 연산)은 useEffect 안에서 실행시켜주면 된다.