React useEffect

Lifecycle

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

컴포넌트는

1.생성-mount

2.재렌더링-update

3.삭제-unmount

과정을 거친다. 

 

이 과정에서 중간중간  코드를 넣어서

각각의 주기에 기능을 넣어줄수있는데

이것을 갈고리(hook)를 건다고 하고 

Lifecycle hook 이라고 한다. 

 

 

useEffect

함수형 컴포넌트에서 Lifecycle hook 을 사용할때는

useEffeect 라는 함수를 쓴다.

import {useState, useEffect} from 'react';

function Detail(){

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

 

useEffect 특징

useEffect 안에 있는 코드는 html 렌더링 이후에 동작한다. 

조금이라도 html 렌더링이 바른 사이트를 원하면

부가기능(side Effect)들을 useEffect안에 넣어주면 된다. 

오래걸리는 반복연산, 서버에서 데이터 가져오는 작업, 타이머 설정 같은 것은

useEffect에 담아 준다.