[React] useEffect 파해치기

useEffect

컴포넌트를 동기화시켜주는 React 자체 제공 시스템(hook).
이는 컴포넌트가 mount, update, unmount될 때 실행된다.

실행 시점

위에서 언급한 것 처럼 mount, update, unmount될 때 실행된다.
각 상황에서 구체적일 실행 시점을 살펴보자.

우선 useEffect는 컴포넌트의 렌더링 이후 실행된다.

리렌더링

컴포넌트의 상태가 변하면 이를 재평가(재실행)하여 새로운 UI를 그리는 것.
즉 렌더링 > 상태 변화 > 재평가 > 리렌더링의 과정을 반복하게 된다.

여기서 렌더링이란 재평가된 컴포넌트의 내용을 가상 DOM에 그리는 것을 말한다.
UI가 실제로 화면에 그려지는 것은 Commit이라 칭한다.(실제 와 가상 DOM에 차이가 있을 때만)

mount

위에서 언급한 것 처럼 컴포넌트 재평가 후 useEffect가 실행된다.
가령 아래와 같은 코드가 있다면

import { useEffect } from "react";

export default function App() {
  console.log('1')
  
  useEffect(() => {
    console.log('mount')
  }, []);
  
  console.log('2')
  return (
    <>
      {/** 생략.. */}
    </>
  );
}

1
2
mount

이와 같은 출력 결과가 나온다.
당연하게도 컴포넌트 평가 중 1, 2가 출력되고 그 후 useEffect가 실행되어 mount가 출련된다

update, unmount

그렇다면 update와 unmount는 어떻까? 아래 코드를 실행해보면

import { useEffect, useState } from "react";

export default function App() {
  const [input, setInput] = useState('')
  console.log('1')
  
  useEffect(() => {
    console.log('mount')
    return () => {console.log('unmount')}
  }, []);
  
  console.log('2')
  return (
    <>
      {/** 생략.. */}
    </>
  );
}

1
2
mount
1
2
unmount
mount

이와 같은 출력 결과가 나온다.
처음 컴포넌트가 렌더링 되며 1, 2, mount가 출력되고 그 후 상태의 변화가 있으면 컴포넌트가 재평가(리렌더링)되며 1, 2가 출력된다. 그 후 컴포넌트가 unmount되고 update되며 unmount, mount가 출력된다.
컴포넌트의 mount, unmount시점도 이를 통해 알 수 있다.

불필요한 useEffect

이런 useEffect를 남용하게 되는 경우가 종종 있다

1. 유저의 인터렉션이 있는 경우(event가 발생할 때)

즉, 상태 변화(재평가)가 이미 발생하는데 또 useEffect를 사용하는 경우

2. 다른 상태에 의존하여 상태를 변경할 때

하나의 상태가 변경된다면 리렌더링이 일어나며 그에 의존한 상태 또한 변경될 것이 분명하다. useEffect를 사용하면 불필요한 리렌더링을 일으키게 된다.

---

참고

1. https://funveloper.tistory.com/193#google_vignette
2. https://choyeon-dev.tistory.com/10
3. https://velog.io/@pcg0527/useEffect-%EA%BC%AD-%ED%95%84%EC%9A%94%ED%95%A0-%EB%95%8C%EB%A7%8C-%EC%93%B0%EC%9E%90#get-race-condition-%EB%8B%A4%EB%A3%A8%EA%B8%B0
4. https://curt-poem.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8%EA%B0%80-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81%EB%90%98%EB%8A%94-%EC%8B%9C%EC%A0%90%EA%B3%BC-useEffect