📲 Effect Hook

⭐️ useEffect

이전 챕터에서 side Effect에 대해서 알아보고, 함수형 컴포넌트의 side Effect는 어떤것들이 있는지 알아봤습니다. 하지만 이런 side Effect들을 함수의 body 자리(render)에서 실행시키면 안됩니다.

앞서 함수 컴포넌트의 리턴 값은 UI 요소라고 설명했고, state, props의 변화가 있을 때마다 함수가 실행된다고 말씀드렸습니다. 이 말은 매 렌더링 때마다 함수 body에 있는 로직이 실행된다는 뜻입니다.

또한 렌더링과 무관한 로직이 렌더링 과정에서 실행되기 때문에 렌더링 자체에 영향을 줘 성능 상 악영향을 끼칠 수도 있습니다.

function greetWithSideEffect({ name }) { // Input
  // Bad!
  **document.title = `${name}님 안녕하세요!`; // Side Effect**

  return <div>{`${name}님 안녕하세요!`}</div>; // Output
}

그래서 React에서는 이런 Side Effect를 일으키기 적절한 장소로서 useEffect hook을 제공합니다.

공식 문서에서도 useEffect를 "React의 순수한 함수적인 세계에서 명령적인 세계로의 탈출구로 생각하세요" 라고 설명하고 있습니다.

여기서 "순수한 세계"란 렌더링(Input → Output)을 뜻하고, 렌더링 이외에 일으켜야 하는 Side Effect를 일으킬 탈출구로 useEffect를 사용하라는 의미입니다.

useEffect는 Side Effect를 렌더링 이후에 발생시킵니다(예외: useLayoutEffect). useEffect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장한다는 뜻이고, 바꿔 말하면 Side Effect가 렌더링에 영향을 주지 않도록 설계되었음을 의미합니다.

import { useEffect } from 'react';

function greetWithSideEffect({ name }) { // Input
  useEffect(() => {
    // Good!
    document.title = `${name}님 안녕하세요!`; // Side Effect
  }, [name]);

  return <div>{`${name}님 안녕하세요!`}</div>; // Output
}

만약 Side Effect 이후 업데이트 된 정보가 있어 새롭게 화면이 그려져야 할 경우(state, props의 업데이트) 새롭게 렌더링을 일으킵니다.

함수 컴포넌트는 최신 state와 props를 반영한 화면을 리턴하게 됩니다. Effect를 일으킬 타이밍은 앞서 설명했던 useEffect의 두 번째 인자인 의존성 배열(Dependancy Array)를 통해 표현하게 되는데, 이에 대해 조금 더 자세히 살펴보겠습니다.

⚡️ Rendering Cycle with useEffect

useEffect는 다음과 같은 형태로 사용합니다.

두 번째 인자에 감지할 값을 배열로 넘겨주게 되면 해당 값들이 변경되었을 때만 실행되게 할 수도 있습니다.

import { useEffect } from "react"

// 사용법
useEffect( 실행시킬 동작, [ 타이밍 ] )
document.addEventListener("타이밍", 실행시킬 동작) // 추상화 한 예시

// 매 렌더링마다 Side Effect가 실행되어야 하는 경우
useEffect(() => {
  // Side Effect
})

// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 특정 값의 업데이트를 감지했을 때마다 실행되어야 하는 경우
useEffect(() => {
  // Side Effect
}, [value])

// Side Effect가 첫 번째 렌더링 이후 한번 실행 되고,
// 이후 어떤 값의 업데이트도 감지하지 않도록 해야 하는 경우
useEffect(() => {
  // Side Effect
}, [])

그림을 통해 조금 더 자세히 살펴보겠습니다.

아래 다이어그램은 useEffect를 사용한 렌더링 사이클과 그 경우의 수를 표현하고 있습니다.

(출처 : https://dmitripavlutin.com/react-useeffect-explanation/)

함수 컴포넌트의 렌더링은 기본적으로 아래 순서대로 일어납니다.

1. 컴포넌트가 렌더링 됩니다. 최초로 진행되는 렌더링은 브라우저에 처음으로 이 컴포넌트가 보여졌다는 의미로 mount 라고 표현합니다.
2. useEffect 첫 번째 인자로 넘겨준 함수(callback)가 실행됩니다(Side Effect).
3. 다시 렌더링(re-render)이 일어납니다 (state나 props가 변경된 경우)
4. useEffect는 두 번째 인자에 들어있는 의존성 배열을 체크합니다.
   • 만약 두 번째 인자에 아무런 값도 넘기지 않았거나 / 인자로 넘긴 배열에 들어있는 값 중 업데이트된 것이 하나라도 있다면 첫 번째 인자로 넘겨준 함수(callback)가 실행됩니다(Side Effect).
   • 하나도 없거나 빈 배열이라면, 아무런 일도 하지 않습니다.
5. 만약 앞에서 일으킨 Effect에서 state나 props를 변경시켰다면 다시 렌더링이 일어납니다.
6. (중략...)
7. 컴포넌트가 필요 없어지면 화면에서 사라집니다. 컴포넌트가 브라우저의 화면에서 사라졌다는 의미로 unmount라고 표현합니다.