[React] useEffect에 대해서 알아보자

 

useEffect 함수란?

 

React component가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 React Hook입니다.

import {useState, useEffect} from 'react';

function Detail(){

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

  let [count, setCount] = useState(0)
  
  return (
    <button onClick={()=>{ setCount(count+1) }}>버튼</button>
  )
}

 

위 소스 처럼 콜백함수 내에 소스를 적으면 컴포넌트가 mount & update 시 실행이 됩니다.

즉, 버튼을 클릭할때마다 '안녕' 이 콘솔창에 나타나게 됩니다.

 

하지만, 

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
  });
  console.log('안녕')
  
  let [count, setCount] = useState(0)
  
  return (
    <button onClick={()=>{ setCount(count+1) }}>버튼</button>
  )
}

 

위 소스처럼 콜백함수 내에 적지 않아도 '안녕'이 두번 나타나게 됩니다.

그 이유는 useEffect 바깥에 적어도 똑같이 컴포넌트 mount & update시 실행됩니다.

컴포넌트가 mount & update시 function 안에 있는 코드도 다시 읽고 지나가서 그렇습니다.

 

그럼 왜 useEffect를 만들어 놓은것일까요?

 

차이점은 useEffect 안에 적은 코드는 html 렌더링 이후에 동작합니다.

 

예를 들어 아래 굉장히 시간이 오래 걸리는 소스가 있습니다.

function Detail(){
  (반복문 10억번 돌리는 코드)
  return (생략)
}

 

▲ 여기에 대충 적으면 반복문 돌리고 나서 하단의 html 보여줌

 

function Detail(){
  useEffect(()=>{
    (반복문 10억번 돌리는 코드)
  });
  return (생략)
}

 

▲ useEffect 안에 적으면 html 보여주고 나서 반복문 돌림 

 

이런 식으로 코드의 실행 시점을 조절할 수 있기 때문에 조금이라도 html 렌더링이 빠른 사이트를 원하면 시간이 오래 걸리는 것들은 useEffect 안에 넣어서 작업하는게 좋습니다.

 

오래걸리는 반복연산, 서버에서 데이터가져오는 작업, 타이머 등 useEffect 안에 많이 적어 html 렌더링이 빠르게 하는게 좋습니다.

 

 

useEffect 는 다양한 사용법이 있습니다.

useEffect (() => { }) // 1. 재렌더링마다 코드 실행할 때

useEffect (() => { ], []) // 2. mount시 1회 코드실행할 때

useEffect (() => {
	return () => { 코드 
    }
}, []) // 3. unmount 시 1회 코드 실행하고 싶을 때
// 4. useEffect 실행 전에 뭔가 실행하려면 언제나 return () => {}

uesEffect (() => { }, [변수명]) // 5. 특정 state 변경시에만 실행할 때