[React.js] useEffect란? (with 간단한 사용법)

안녕하세요. 성조입니다.

 

이번 포스팅에서는 useEffect를 정리 후. 포스팅해 보려합니다.

 

저는 올바른 정보를 전달하기 위해 학습하고 정리하는 과정에서 많은 노력을 하고 있습니다. 혹여나 잘못된 지식 전달 사항이 있다면 언제든지 댓글로 의견 공유주시면 감사드리겠습니다.

---

useEffect란?

useEffect는 React에서 사이드 이펙트(Side Effect)를 관리하는데 사용되는 Hook이다.

즉, 생명 주기를 관리하는 것으로도 볼 수 있다.

 

 

사이드 이펙트(Side Effect)는 컴포넌트들이 애플리케이션에서 일어나는 다른 모든 외부와의 상호 작용하는 것을 의미한다.

예를 들어보면 backend 개발자가 구현해 놓은 API들을 호출하거나, 이벤트 리스너를 등록 및 해제, DOM 조작하는 것 등이 존재한다.

 

useEffect는 16.8버전 이후로 나왔는데 기존 클래스 컴포넌트였던 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 라이프사이클 메서드를 대체하기 위해서 나온 Hook이다.

 

 

 

useEffect 사용 방법

step 1) 생명 주기를 다루기 위한 useEffect를 활용하려는 컴포넌트에 다음과 같이 import하여 가져와야 한다.

import React, { useEffect } from 'react';

 

 

step 2) 컴포넌트 함수 내에서 다음과 같은 구조로 useEffect를 호출한다.

const 함수 = () => {

    useEffect(() => {
      // Side Effect를 수행하는 코드
    }, [/* 종속성 배열 */]);
    
    return (
    	<>
        <>
    );
}

export default 함수;

useEffect는 "1. Side Effect로 특정 값이 호출될 때 수행하는 함수 코드", "2. 종속성 배열로 2개의 인수"로 2개의 인수를 받는다.

 

 

 

useEffect 활용 종류.

1. 배열이 없는 경우의 useEffect

useEffect(() => {
  // 컴포넌트가 렌더링 될 때마다 실행되는 Side Effect
});

컴포넌트가 렌더링 될 때마다 Side Effect가 실행된다.

 

 

2. 빈 배열이 있는 경우의 useEffect

useEffect(() => {
  // 컴포넌트가 마운트 될 때 한 번만 실행되는 Side Effect
}, []);

컴포넌트가 마운트 될 때 Side Effect가 한 번만 실행된다.

 

 

3. 배열에 종속성이 있는 경우의 useEffect

useEffect(() => {
  // 종속성이 변경될 때마다 실행되는 Side Effect
}, [dependency]);

배열 내의 값이 변경될 때마다 Side Effect가 실행된다.

배열 내의 함수가 계속 변경되면 Side Effect가 계속 반복되는 것이다.

 

 

 

useEffect에서 정리 (Cleanup) 수행하는 방법

useEffect(() => {
  // Side Effect를 수행하는 코드

  return () => {
    // 정리 작업을 수행하는 코드
  };
}, [/* 종속성 배열 */]);

컴포넌트가 이벤트 리스너를 제거하거나 타이머를 해제하는 것과 같은 작업이다. useEffect 내의 함수에서 정리 함수를 반환하면 이러한 정리 작업을 수행할 수 있다.

 

 

 

useEffect 단일 예시인 경우.

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

const App = () => {
  const [data, setData] = useState('상태 관리할 데이터');

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('api 링크를 이곳에 작성한다.');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        data.map(item => <div key={item.id}>{item.name}</div>)
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default App;

예제) useState를 활용해서 데이터를 저장할 상태를 만들고, useEffect를 사용하여 컴포넌트가 마운트 될 때 API에서 데이터를 가져올 수 있도록 만든다.

fetchData 함수는 비동기로 동작하기 때문에 async로 선언하고 await을 같이 활용해서 응답이 도착할 때까지 제어한다. API 호출이 끝나면 가져온 데이터 상태를 저장하고 화면에 표시한다.

 

 

 

useEffect가 여러 개인 경우

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

const App = () => {
  const [dataA, setDataA] = useState(null);
  const [dataB, setDataB] = useState(null);

  useEffect(() => {
    const fetchDataA = async () => {
      const response = await fetch('https://api.example.com/dataA');
      const result = await response.json();
      setDataA(result);
    };

    fetchDataA();
  }, []);

  useEffect(() => {
    const fetchDataB = async () => {
      const response = await fetch('https://api.example.com/dataB');
      const result = await response.json();
      setDataB(result);
    };

    fetchDataB();
  }, []);

  // 컴포넌트 렌더링 로직
}

 

위와 같이 두 개의 useEffect로 구분하면 하나의 useEffect가 하나의 사이드 이펙트를 독립적으로 관리할 수 있게 된다.

 

 

재사용이 가능한 커스텀 훅 예시.

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

커스텀 훅을 위와 같이 만들 수 있다. 또한 내부적으로 useState, useEffect 등 다양한 Hook을 조합할 수 있으며, 일반 함수로 작성된다.

 

 

 

커스텀 훅 적용 예시

import React from 'react';
import useFetch from './useFetch';

const App = () => {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  // 컴포넌트 렌더링 로직
}

위와 같이 API 호출을 처리할 수 있으며, 커스텀 훅의 이름은 반드시 useFetch가 아니더라도 자유롭게 지정할 수 있다.

 

---

오타가 있는 경우 언제든지 댓글 달아주시면 감사드리겠습니다.

 

다음 포스팅 때 뵙겠습니다!

 

 

(잡담)

백엔드에 초점이 잡혀있어서 조금은 설명이 부실할 수도 있었을까 하는 생각이 조금 있었네요😅😅

 

- 참조 -

https://ko.legacy.reactjs.org/docs/hooks-reference.html#useeffect

Hooks API Reference – React

https://ko.legacy.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React