React useEffect 훅 완벽 가이드: useState와 함께 배우는 기초부터 실전까지

React 개발팀은 16.8 버전에서 '훅(Hooks)'이라는 개념을 도입했습니다. 훅은 함수형 컴포넌트에서도 상태(state)와 다양한 React 기능을 사용할 수 있게 해주는 강력한 도구입니다. 대표적인 훅인 useState를 활용하면, 클래스 컴포넌트로 다시 작성할 필요 없이 함수형 컴포넌트 내부에 자체 상태를 설정할 수 있습니다.

React에서 가장 널리 쓰이는 훅 중 하나가 바로 useEffect입니다. useEffect를 사용하면 함수형 컴포넌트의 맥락 안에서 사이드 이펙트(side effect, 부수 효과)를 수행할 수 있습니다. 사이드 이펙트는 일반 JavaScript 함수에서도 발생한다는 점을 기억하세요.

사이드 이펙트란 함수가 자신의 본문 외부에 있는 무언가를 변경할 때 발생합니다. React에서도 마찬가지로, 데이터 페칭(data fetching), 구독(subscription) 처리, 컴포넌트의 DOM 직접 조작 등이 모두 사이드 이펙트에 해당합니다.

useEffect란 무엇일까요?

React 훅 useEffect는 함수형 컴포넌트가 이러한 사이드 이펙트를 수행할 수 있도록 해줍니다. 동작 방식은 클래스 컴포넌트의 생명주기(lifecycle) 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount와 유사합니다. React 생명주기 메서드에 대한 소개 자료를 참고하면 더 깊이 이해할 수 있습니다.

이 글에서는 훅을 시작하는 기본 예제를 살펴보겠습니다. 이 글은 심화 학습이 아닌 입문용으로 작성되었습니다. useEffect에 대한 포괄적인 내용이 필요하다면, React 훅에 익숙해진 후 공식 문서의 개요를 읽어보시길 권장합니다.

React 훅 문법

useEffect를 제대로 이해하려면 먼저 useState 훅의 문법을 간단히 짚고 넘어가야 합니다. 훅을 사용할 때는 React를 임포트(import)하듯이 반드시 훅도 함께 임포트해야 합니다.

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

이제 훅을 포함한 함수형 컴포넌트를 정의할 수 있습니다. 여기서는 JavaScript의 함수 스코프(function scope)를 활용합니다. 함수형 컴포넌트 내부에 useEffect 훅을 정의하면, 스코프 덕분에 state와 props에 자유롭게 접근할 수 있습니다.

useState 문법

설명의 명확성을 위해 간단한 카운터 예제를 사용해 보겠습니다. 버튼이 클릭된 횟수를 DOM에 출력하는 컴포넌트입니다. 임포트 구문을 포함한 전체 함수형 컴포넌트는 다음과 같습니다.

import React, {useState, useEffect} from 'react'
import ReactDOM from 'react-dom'

  const ButtonCounter = () => {
    return (
      <button>Click Me</button>
    )
  }
    

ReactDOM.render(
  <ButtonCounter />,
  document.getElementById('container')
);

이 코드는 버튼을 DOM에 렌더링합니다. useEffect를 정의하기 전에, useState 훅을 통해 초기 상태를 먼저 설정해 보겠습니다.

const [count, setCount] = useState(0);

이 문법을 사용하면 React는 첫 번째 변수를 초기 상태로 설정합니다. 위 예제에서는 useState에 전달된 인자(0)로 count 변수가 초기화됩니다. 두 번째 변수 setCount는 count 값을 업데이트하는 데 사용되는 함수입니다.

count의 초기값을 0으로 설정했으니, 이제 setCount 함수로 상태를 업데이트할 수 있습니다.

const ButtonCounter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked the button {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
  )
}

setCount를 onClick 속성의 콜백 함수로 사용하면, 버튼을 클릭할 때마다 화면의 숫자가 즉시 업데이트됩니다.

클릭 횟수가 정상적으로 표시된다면, useState로 초기 상태를 설정할 때 정의한 setCount 함수가 올바르게 작동하고 있다는 의미입니다. useState 훅의 문법을 확인했으니, 이제 본격적으로 useEffect를 살펴보겠습니다.

useEffect 문법

앞서 언급했듯이, useEffect는 사이드 이펙트의 실행을 담당합니다. 데이터 페칭을 통한 컴포넌트 변경이나 수동 DOM 조작이 모두 여기에 해당합니다. useEffect 훅은 기본적으로 컴포넌트가 렌더링될 때마다 호출됩니다.

동작 방식은 클래스 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 것과 비슷합니다. 카운터 예제를 이어서 진행하며, 이번에는 useEffect가 <p> 요소에 이름을 표시하도록 DOM을 업데이트하게 만들어 보겠습니다.

const [count, setCount] = useState(0);
  const [name, setName] = useState(" ");

  useEffect(() => {
    setName(name + "Ryan")
  })
  return (
    <div>
      <p>Hello {name}! You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
  )
}

위 코드는 일부러 잘못 작성된 것입니다. 실행 결과를 보면 이름이 계속해서 반복해서 붙는 현상이 나타나는데, 이는 useEffect가 컴포넌트가 렌더링될 때마다 호출된다는 사실을 보여주는 좋은 예입니다.

이런 현상이 발생하는 이유는, 기본적으로 useEffect 훅이 componentDidMount와 componentDidUpdate의 역할을 결합한 형태로 동작하기 때문입니다. 즉, 상태가 변경되어 리렌더링될 때마다 effect가 다시 실행됩니다.

컴포넌트가 마운트(mount)될 때만 실행되도록 훅을 커스터마이징하려면, useEffect에 두 번째 인자를 전달하면 됩니다. 빈 배열([])을 두 번째 인자로 넘기면, React는 컴포넌트가 처음 마운트될 때만 useEffect를 호출합니다. 이 배열을 '의존성 배열(dependency array)'이라고 부르며, 여기에 지정된 값이 변경될 때만 effect가 재실행됩니다.

useEffect(() => {
    setName(name + "Ryan")
  }, [])

이제 "Ryan"이라는 문자열은 함수형 컴포넌트가 마운트될 때 딱 한 번만 표시됩니다.

완벽합니다! 훅 사용에 익숙해지는 데는 어느 정도 시간이 필요합니다. React 공식 문서에는 훅 사용에 대한 최신 가이드가 잘 정리되어 있으니, 학습 과정에서 꼭 함께 참고해 보세요.

마무리

이번 React useEffect 훅 입문 글에서는 훅이 무엇인지, 그리고 어떻게 사용하는지 알아보았습니다. 또한 useState와 useEffect 훅의 문법을 각각 기초 예제와 함께 단계별로 살펴보았습니다.

훅의 활용 가능성은 이 입문 글에서 다룬 내용을 훨씬 뛰어넘습니다. 이 글을 읽은 후에는 직접 코드를 작성해 보며 감각을 익히고, 추가 자료들을 찾아가며 React 훅에 대한 이해를 더욱 깊게 다져보세요. 클래스 컴포넌트가 당장 사라지는 것은 아니지만, 훅이야말로 React의 미래입니다. 최신 동향을 꾸준히 확인하고 따라가 보시기 바랍니다!