[React] useEffect

• 이번 글에서는 useEffect에 대해서 이야기해보겠습니다.

 

useEffect

1) 역할

• useEffect는 React Component에서 side effects를 수행하기 위한 Hook입니다.
• side effects는 데이터를 fetch하거나, 수동으로 DOM을 조작하는 등 Component의 주요 렌더링 로직 외에 실행되어야 하는 모든 작업을 의미합니다.
• useEffect를 통해 함수형 Component에서도 클래스형 Component의 생명주기 메소드와 유사한 기능을 구현할 수 있습니다.

2) 동작 방식

• 기본적으로 useEffect는 모든 렌더링 이후에 실행됩니다.
  1. 첫 번째 인자로 side effects를 수행할 callback function을 받습니다.
  2. 두 번째 인자로 의존성 배열(dependency array)을 받습니다. 이 배열 내의 값들이 변경될 때만 효과가 재실행됩니다.

• 빈 배열([])을 전달하면 component가 마운트될 때 한 번만 실행되고, 의존성 배열을 생략하면 모든 렌더링 후에 실행됩니다.
• Callback function에서 함수를 반환하면, cleanup function으로 사용되는데 이 함수는 component가 언마운트되거나 다음 효과가 실행되기 직전에 호출됩니다.

3) 간단한 예시 몇 가지!

• Data Fetching

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) throw new Error('Failed to fetch user data');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return null;

  return <div>{user.name}</div>;
}

 

• Event Listener 등록 및 제거

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

function WindowResizeTracker() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div>
      Current window size: {windowSize.width} x {windowSize.height}
    </div>
  );
}

 

• 위 두 가지 예시는 다음과 같은 흐름으로 동작하고 있습니다!
• 기본적으로 component가 mount되고, useEffect 내 코드가 실행됩니다. 여기서 data fetch나, event listener 등록 등의 작업이 이루어집니다.
• 위 작업의 결과로 component의 state가 update됩니다.
• 다음 글에서는 useRef에 대해서 알아보겠습니다.