React - useEffect

컴포넌트에는 LifeCycle이 있습니다. 어떤 사이클이 있냐면 1. 생성되거나 2. 삭제되거나 3. 업데이트 되거나 세 가지의 사이클이 있습니다. 이런 사이클 중간중간에 Hook을 걸어줄 수 있습니다. 이 때 Hook은 사이클 중간중간에 컴포넌트에게 새로운 동작을 수행하게 만드는 역할을 담당합니다. 이 때 걸어주는 Hook을 LifeCycle Hook 이라 부릅니다.

 

함수형 컴포넌트를 사용하는 시대가 되고부터 라이프사이클 훅을 사용할 때 useEffect 라는 것을 사용합니다. useState를 사용하기 전에 import 했던 방식과 동일하게 import를 해주고 사용하고 싶은 컴포넌트에 바로 사용해주면 됩니다. 

 

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


function Detail() {
  
  useEffect(()=>{ });
  
  return (
     .
     .
     .
     
  )
}

 

이런 형식으로 사용하면 됩니다. useEffect 안에는 콜백함수가 하나 들어갑니다. 그 콜백함수 안에 컴포넌트가 첫 등장하고나서 작동하게 할 코드를 적어주면 됩니다. 

 

useEffect 내의 코드가 실행되는 조건으로는 두 가지가 있습니다.

 

1. 컴포넌트가 처음 등장해서 로딩이 끝났을 때 실행됩니다. ( 전문용어로 mount가 되었을 때라 합니다.)
2. 컴포넌트가 업데이트 되었을 때 실행됩니다. ( 전문용어로 update 되었을 때라 합니다.)

 

그런데 만약 위의 두 조건과는 다르게 컴포넌트가 사라질 때 어떤 코드를 실행시키고 싶다면 어떻게 해야될까요?

 

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


function Detail() {
  
  useEffect(()=>{ 
    return ()=>{ } 
   });
  
  return (
     .
     .
     .
     
  )
}

 

이런 식으로 useEffect의 콜백함수 안에 어떤 함수를 써줄 때 return을 붙인 다음에 써주면 됩니다. return 뒤에는 꼭 함수가 와야 합니다. 

 

 

useEffect는 여러개를 써줘도 됩니다. 그런데 useEffect는 맨 위에 선언된 것부터 위에서부터 아래로 순서대로 실행됩니다. 

 

 

useEffect는 마운트 될 때 혹은 업데이트 될 때 실행된다고 했습니다. 그런데 만들어둔 기능이 원하지 않을 때도 실행될 때가 있습니다. 예를 들어 마운트 됐을 때만 실행시키고 싶은 기능인데 업데이트 될 때도 그 기능이 실행이 된다면 자원 낭비가 될 것입니다. 이를 방지하는 방법이 있습니다.

 

useEffect(()=>{
   let 타이머 = setTimeout(()=>{ alert변경(false) }, 2000);
}, []);

 

useEffect 안에 저런 콜백함수가 있을 때 콜백함수 안에서 맨 마지막에 [ ] 대괄호를 준 것을 확인할 수 있습니다. 이 대괄호 안에는 state가 들어갈 수 있습니다. 따라서 대괄호 안에 들어간 state가 변경이 될 때만 업데이트라고 인지하고 기능을 실현해달라고 할 수가 있는 것입니다. 따라서 만약 [ ] 대괄호를 비워놓는다면 처음에 마운트 될 때만 실행되고 그 이후에는 어떤 업데이트가 있더라도 실행되지 않을 것입니다.