리액트 useEffect로 부수작용 다루기

시리즈

2024. 11. 28. PM 11:01:25

#리액트 #부수효과 #부수작용 #useEffect #side effect #메모리

리액트 useEffect로 부수작용 다루기

이번 편에서는 React의 또 다른 핵심 Hook 중 하나인 useEffect를 알아보겠습니다.

부수작용(Side effect)이란?

리액트 컴포넌트의 주요 역할은 UI를 렌더링하는 것입니다. 앞선 useState로 상태 관리하기 편에서 멱등성을 다뤘는데, 사실 우리가 만드는 리액트 컴포넌트는 멱등성이 보장되지 않는 경우에 많이 노출됩니다. 리액트 컴포넌트라는 개체 상태가 외부 요인으로 변할 수 있지요. 대표적인 것 몇 가지를 나열해자면,

API 호출을 하여 데이터 가져오기
DOM을 직접 조작하는 작업
브라우저 API(localStorage, setInterval 등) 사용
이벤트를 구독하고 해제하기

이러한 작업들로 발생하는 작용이나 동작을 부수작용 또는 부수효과(Side Effect)이라고 합니다. 이런 부수작용 동작은 대개 컴포넌트 렌더링에 직접적인 영향을 주진 않지만, 우리가 기능 동작엔 필수요소입니다. useEffect 훅은 바로 부수작용을 다루는 데 사용합니다.

실은 부수작용을 다루는 건 까다롭습니다. 리액트 컴포넌트 구현은 상태 관리와 부수작용 통제의 싸움이나 마찬가지입니다. UI 프로그래밍은 어렵다고 말하게 만드는 요인이죠.

useEffect 기본 사용 방법

useEffect를 사용하는 방법은 useState와 비슷하지만, 중요한 차이가 있습니다.

useEffect(() => {
  // 실행하고자 하는 부수작용
}, [의존성 배열]);

useEffect()함수의 첫 번째 인자는 화살표 함수가 전달되는데, 의존성 배열에 변화가 생기면 실행되는 콜백(callback) 함수입니다. 두 번째 인자는 첫 번째 인자인 ㅜ함수를 언제 실행시킬지 결정하는 요소로, 의존성 배열이라고 합니다. 의존성 배열에 나열된 객체에 변동이 생기면 콜백 함수가 실행됩니다. useEffect 없이 직접 부수 작용을 일으키는 구현을 해도 되지만, 의존하는 객체에 변동이 생길 때 실행되도록 하는 건 useEffect의 특별한 속성이지요.

오랜만에 실습을 해볼까요? 컴포넌트가 렌더링 된 후 5초 동안 E-mail 주소를 입력하지 않으면 입력란으로 초점을 옮기는 기능을 구현해보겠습니다.

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

function Subscription({ buttonLabel, onSubscribe, children }) {
  const [email, setEmail] = useState("")
  const inputRef = useRef(null);

  const handleSubmit = () => {
    onSubscribe(email);
  }

  useEffect(() => {
    const tid = setInterval(() => {
      if(email) {
        return;
      }
      inputRef.current.focus();
    }, 5000);

    return () => clearInterval(tid);
  }, []);
  
  return (
    <>
      {children instanceof Function ? children('학습과 성장 컨텐츠 소식', email) : children}
      <input
        ref={inputRef}
        type="text"
        placeholder="이메일 주소를 입력해주세요"
        value={email}
        onChange={(e) => {
          const newValue = e.target.value;
          setEmail(newValue);
          console.log(newValue);
        }}
      />
      <button onClick={handleSubmit}>{buttonLabel}</button>
    </>
  )
}

코드가 좀 추가됐습니다. useEffect() 부분만 따로 보겠습니다.

  useEffect(() => {
    const tid = setInterval(() => {
      if(email) {
        return;
      }
      inputRef.current.focus();
    }, 5000);

    return () => clearInterval(tid);
  }, []);

먼저 useEffect()가 관찰할 또는 useEffect()의 콜백 함수를 실행시킬 의존성은 빈 배열입니다. 이것은 아무것도 의존하지 않는다는 뜻인데, 해당 컴포넌트가 렌더링 되고나서 실행하는 용도로 씁니다. useEffect()로 전달한 콜백 함수는 간단한 동작을 합니다. email 상태값이 있으면 아무것도 수행하지 않고, 상태값이 없으면(falsy) 뭔가의 focus() 메서드를 호출합니다. 이건 <input> 태그에 대해 focus()를 호출해 포커스를 맞추는 동작으로써, 이후 편에서 useRef()에 대해 다룰 예정입니다. 여기에선 <input> 컴포넌트를 DOM 제어하듯이 다루는 게 아니라 useRef() 훅으로 다루게 됐다고만 이해하셔도 충분합니다. 아무튼 이러한 동작을 5초 마다 반복합니다.

그다지 좋은 사용자 경험(UX)은 아니죠. 콜백 함수는 호출자에게, 즉 useEffect에게 아무것도 반환하지 않거나 함수를 반환합니다. 함수를 반환하면 콜백 함수가 종료될 때 호출되는데, 콜백 함수 안에서 일으킨 부수효과을 정리하는 용도로 주로 씁니다. 이름도 정리(Clean up) 함수라고 하는데, 사용한 자원을 정리해 해제해 메모리 누수를 막는다는 의미도 있지만 부수효과를 정리해서 클린업 함수라고 이름 지은 게 아닐까 생각합니다.

여기까지 진행한 커밋

의존성 배열 사용하기

의존성 배열을 조금만 더 살펴보겠습니다. 의존성 배열은 크게 네 가지 유형입니다.의존성 배열은 useEffect가 언제 실행될지를 결정하는 중요한 요소입니다. 크게 세 가지 경우가 있습니다:

// 1. 의존성 배열이 없는 경우 : 매 렌더링마다 실행
useEffect(() => {
  console.log('매 렌더링마다 실행됩니다');
});

// 2. 빈 의존성 배열 : 마운트 시에만 실행
useEffect(() => {
  console.log('마운트 시에만 실행됩니다');
}, []);

// 3. 의존성이 있는 경우 : 해당 값이 변경될 때마다 실행
useEffect(() => {
  console.log(`count가 ${count}로 변경되었습니다`);
}, [count]);

// 4. 의존성이 여러 개 있는 경우 : 마찬가지로 해당 값이 변경될 때마다 실행
useEffect(() => {
  console.log(`${name}님의 count가 ${count}로 변경되었습니다`);
}, [count, name]);

위 네 경우 중 2번을 우리가 살펴본 것입니다. 먼저 의존성을 아예 전달하지 않는 경우는 useEffect()가 속한 컴포넌트가 렌더링될 때마다 실행됩니다. useEffect() 없이 뭔가를(함수) 호출하는 코드가 그대로 노출된 것과 사실상 같습니다.

세 번째와 네 번째는 같은데요. 의존성으로 전달된 값이 변하면 콜백 함수가 실행됩니다. 그럼 네 번째는 어떤 경우일까요? 콜백 함수 안에서 다루는 값은 의존성 배열에 담습니다. count의 값이 변했으니 변한 값을 다루는 콜백 함수를 호출하는 것이기 때문입니다. 만약 콜백 함수 안에서 다루는 상태 값인데 의존성 배열에 넣지 않으면 우리가 기대하는 동작이 이뤄지지 않을 수 있습니다. 그래서 리액트를 지원하는 코드 에디터는 의존성 배열을 검사해 개발자에게 경고해줍니다.

useEffect의 실행 시점

useEffect는 꽤 다루기 까다롭습니다. 용도 자체가 부수작용을 일으키는 동작을 하여 예상 못한 부분에서 엉뚱한 동작을 일으키기도 하는데, 콜백 함수가 실행되는 건 의존하는 다른 대상의 상태를 따르기 때문이죠. 그래서 리액트로 개발하다보면 심심치 않게 무한 리렌더링 상황에 부딪히곤 합니다.

이런 상황을 최소화하거나 문제를 해결할 때 도움이 되는 것은 useEffect가 동작하는 순서를 아는 것입니다.

컴포넌트 렌더링
화면에 반영(Paint)
useEffect 함수 실행
(리렌더링 시) 이전 부수작용 클린업
새로운 부수작용 실행

주요 활용 예

이런 까다로운 useEffect는 언제 사용할까요? 서두에 설명드린대로 컴포넌트를 벗어난 영역에서 일어나는 동작, 즉 부수작용을 다룰 때 사용합니다. 크게 네 가지 경우입니다.

네트워크로 데이터 가져오기(fetching)

사용자 정보는 서버에 저장되어 있지 컴포넌트 자체엔 그런 정보가 없습니다. 따라서 어디선가는 데이터를 가져와야(fetching) 하는데, 리액트에서는 useEffect 안에서 데이터를 가져오는 경우가 많습니다. 다음은 예시입니다.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      setUser(data);
    };

    fetchUser();
  }, [userId]);

  if (!user) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

물론 최근에는 SWR이나 Tanstack Query 등에서 제공하는 훅을 이용하여 useEffect 밖에서 부수작용을 상태 관리하듯이 다룹니다만, Tanstack Query도, 그리고 SWR도 내부에선 useEffect()를 사용합니다.

DOM 조작

리액트 DOM이 아닌 HTML DOM을 다루는 것은 리액트 입장에선 컴포넌트 외부 요소를 다루는 부수작용 대상입니다. 마땅히 useEffect로 다루는데, 흔한 예시가 위에서 우리가 실습한 input 태그를 다루는 것입니다.

구독과 해제

컴포넌트 외부의 자원을 사용하여 useEffect를 쓰는데, 사용한 자원을 해제도 해야 하는 경우가 있습니다. 흔한 상황 중 하나는 웹소켓을 사용하는 것입니다. 다음은 예시 코드인데, 코드를 이해하실 필요는 없습니다. new WebSocket()으로 객체를 생성하며 자원을 할당하고, 컴포넌트가 해제(release)될 때 해당 컴포넌트가 사용한 웹 소켓 자원도 해제하기 위해 소켓을 닫는 동작을 하는 흐름만 보면 됩니다.

function ChatComponent() {
 const [messages, setMessages] = useState<string[]>([]);
 const ws = useRef<WebSocket | null>(null);

 useEffect(() => {
   // 웹소켓 연결
   ws.current = new WebSocket('ws://localhost:8080');

   // 메시지 수신 핸들러
   ws.current.onmessage = (event) => {
     setMessages(prev => [...prev, event.data]);
   };

   // cleanup: 연결 종료
   return () => {
     ws.current?.close();
   };
 }, []);

 // 메시지 전송 함수
 const sendMessage = (message: string) => {
   ws.current?.send(message);
 };

 return (
   <div>
     {messages.map((msg, i) => <p key={i}>{msg}</p>)}
     <button onClick={() => sendMessage('Hello')}>Send</button>
   </div>
 );
}

또 다른 예는 DOM 조작입니다. 사용자의 화면 스크롤을 관찰하는 컴포넌트를 예시로 살펴보겠습니다.

function ScrollTracker() {
 const [scrollPosition, setScrollPosition] = useState(0);

 useEffect(() => {
   const handleScroll = () => {
     setScrollPosition(window.scrollY);
   };

   window.addEventListener('scroll', handleScroll);

   return () => {
     window.removeEventListener('scroll', handleScroll);
   };
 }, []);

 return (
   <div>
     <p>Scroll position: {scrollPosition}px</p>
   </div>
 );
}

이번 코드는 좀 간결하죠? 스크롤 이벤트를 구독(listening)하다가 컴포넌트가 해제(release)될 때 스크롤 이벤트에 대한 구독도 해지한 것입니다. 그렇지 않으면 메모리 누수가 일어나게 됩니다.

타이머 관리

마지막으로 예시도 우리가 실습한 경우입니다. setTimeout()은 실행된 후 종료된다지만, setInterval()은 지정한 시간마다 계속 반복되므로 상태가 유지됩니다. 따라서 타이머를 정리(clearInterval())해주는 게 좋습니다.

푸딩캠프 뉴스레터를 구독하면 학습과 성장, 기술에 관해 요약된 컨텐츠를 매주 편하게 받아보실 수 있습니다.

이전 컨텐츠

다음 컨텐츠