[React] useEffect의 개념 및 실행 시점의 차이 및 사용예제

useEffect란?

함수형 컴포넌트에서 side effect를 수행하고, 컴포넌트의 생명주기에 특정 작업을 연결하는 Hook이다.
이는 컴포넌트가 렌더링될 때, 업데이트될 때, 혹은 제거될 때 특정 작업을 수행하게 해준다.

 

ex1) 사용예제

import { useEffect } from 'react'
import './App.css';
 
function App() {
 
  useEffect(function () {
    //mount
    console.log("컴포넌트 생성");
 
    //unmount
    return function () {
      console.log("컴포넌트 사라짐");
    }
 
  }); // 의존성 배열이 빈 배열이면 컴포넌트가 마운트 되었을 때 한번만 실행
 
  return (
    <>
      <h1>useEffect 테스트 (기본)</h1>
    </>
  );
}
export default App;

 

결과화면

첫 번째 렌더링 시에 "컴포넌트 생성"이 찍히는 것은 useEffect의 첫 번째 실행이다.

해당 useEffect는 컴포넌트가 마운트될 때 실행된다.

두 번째로 "컴포넌트 사라짐"이 찍히는 것은 컴포넌트가 다시 렌더링되어 언마운트되었을 때의 작업이다.

이전에 생성된 컴포넌트 인스턴스가 제거되고, 새로운 컴포넌트 인스턴스가 생성되어 언마운트 작업이 실행된다.

마지막으로 "컴포넌트 생성"이 다시 찍히는 것은 두 번째 렌더링 시에 useEffect가 다시 실행되기 때문이다.

useEffect의 의존성 배열이 빈 배열인 경우, useEffect는 컴포넌트가 마운트될 때와 언마운트될 때만 실행된다.

따라서 컴포넌트가 새로 렌더링될 때는 다시 useEffect가 호출되어 "컴포넌트 생성"이 찍히게 된다.

요약하면, useEffect는 컴포넌트가 마운트되거나 업데이트될 때, 그리고 컴포넌트가 언마운트될 때 실행된다.

만약 의존성 배열이 빈 배열인 경우, 컴포넌트가 업데이트되어도 useEffect는 다시 실행되지 않는다.

 

 

ex2) 사용예제

import { useState, useEffect } from 'react'
import './App.css';
 
function App() {
 
  const [val1, setVal1] = useState(0);
  const [val2, setVal2] = useState(0);
 
  useEffect(function () {
    console.log("Comp3");
  }, [val1]);
 
  const setStateEvent1 = function () {
    setVal1(v => v + 1);
  }
 
  const setStateEvent2 = function () {
    setVal2(v => v + 1);
  }
 
  return (
    <>
      <h1>useEffect 테스트</h1>
      <button onClick={setStateEvent1}>val1 리렌더링</button>
      <button onClick={setStateEvent2}>val2 리렌더링</button>
    </>
  );
}
export default App;

useEffect에서 마지막 [val1]과 같이 배열에 특정 state 혹은 props를 선언할 경우, 해당 값이 갱신되거나 변경될 때 렌더링 되면서 useEffect안의 로직이 재실행된다.

따라서 위 로직에서 val1 리렌더링 버튼을 눌렀을 때만 로그가 출력된다.

 

 

Clean up function 이란?

useEffect return 결과에 함수를 리턴하며 이 함수를 Clean up function 이라고 한다.

컴포넌트 unmount 시에 clean up function이 1회 실행된다.

clean up function에는 타이머제거, socket 연결요청제거, ajax 요청 중단 같은 코드를 많이 작성한다.

위 코드에서 노란박스 안에 있는 return 함수가 바로 Clean up function이라고 볼 수 있다.

 

 

useEffect() 실행 시점

일반적인 Component 안에 로직을 넣어도 useEffect 처럼 실행되는 것을 볼 수 있다. 차이점으로는 Component 안의 로직은 렌더링 실행 전에 실행되고, useEffect 코드는 렌더링이 다 되고 난 이후에 실행된다.

실행 시점의 차이 때문에, 시간이 오래 걸리는 반복연산, 서버에서 데이터를 가져오는 작업, 타이머 등이 useEffect 안에 넣는 로직으로 사용될 수 있다.

 

컴포넌트 내부 로직 실행 시점 VS useEffect 실행 시점

컴포넌트 내부 로직은 컴포넌트가 렌더링 되는 시점 이전에 실행된다.

 

반면, useEffect 내부 로직은 컴포넌트가 렌더링된 이후에 실행되며, 렌더링이 완료된 이후 비동기 작업이 실행된다.

 

컴포넌트 내부 로직에 복잡한 연산을 넣을 경우 렌더링이 상대적으로 느려지는 현상을 볼 수 있다.

useEffect 로직은 오래 걸리는 로직이나 타이머, 데이터를 서버에서 가져오는 등의 로직을 넣어도 렌더링에 영향X