useEffect 사용

useEffect는 componentDidMount() , componentWillUnmount() 같은 컴포넌트 생명주기 훅이다.

사용법은 useEFfect 훅을 import를 해온 후, function 내부의 return 바로 전에 적어준다. 가급적이면 변수 이후에 적어주는 것이 좋다. (스코프로 인해 읽어오지 못할 수가 있음)

import React, {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    
  }, []);
  
  return (
    <div><div/>
  )
}

useEffect 콜백함수 안에는 Detail 컴포넌트가 첫 등장하고나서 실행하고싶은 코드가 있으면 적어주면 된다.

 

콜백함수 이후에 등장하는 대괄호 안에는 조건문이 들어간다. 대괄호에는 state를 적을 수 있다.

해당 state가 변경될 때만 useEffect가 실행되는 것이다.

 

 

해당 컴포넌트가 사라질 때 코드를 실행하고 싶다면 return 함수를 쓰자

 

import React, {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
   
    return function 함수명(){ 실행 코드 } 
  });
  
  return (
    
  )
}