useEffect란?

useEffect는 컴포넌트의 부수 효과(side effect)를 처리하기 위한 Hook이다.
부수 효과(side effect)란 컴포넌트의 생명주기에 관련된 작업이나 외부 리소스와의 상호 작용을 의미한다.

- useEffect는 렌더링 직후에 부수 효과로 실행된다.
- UI 렌더링 외에 컴포넌트가 수행해야 하는 일을 효과(Effect)라 한다.
- useEffect를 렌더링이 끝난 다음에 발생하는 함수라 생각하면 간단하다.

1. 생명주기에 관련된 작업

생명주기와 관련된 작업이란 컴포넌트의 마운트(Mount), 업데이트(Update), 언마운트(Unmount)단계에서 수행되는 작업을 말한다.

1-1. Mount : 화면의 첫 렌더링

• 컴포넌트가 처음으로 DOM에 삽입될 때 발생하는 단계다.
• 컴포넌트의 초기화 작업이 수행되며, 외부 리소스에 대한 요청이나 구독 동의 작업을 시작할 수 있다.

1-2. Update : 재렌더링

• 컴포넌트의 상태나 속성(prop)이 변경될 때 발생하는 단계다.
• 컴포넌트의 재렌더링과 함께 필요한 작업을 수행할 수 있다.
• useEffect를 사용하여 업데이트 단계에서 원하는 작업을 처리할 수 있다.

1-3. Unmount : 화면에서 사라질때

• 컴포넌트가 DOM에서 제거될 때 발생하는 단계다.
• 정리 작업(clean-up)을 수행할 수 있다.
• 구독을 해제하거나 사용한 리소스를 정리하는 등의 작업이 수행 된다.

2. 외부 리소스와의 상호 작용

외부 리소스와의 상호작용은 컴포넌트가 외부 시스템과 통신하거나 외부 리소스를 사용하는 작업을 의미한다. 이를 통해 데이터를 가져오거나 업데이트하거나, 외부 시스템과의 상호작용을 통해 어플리케이션의 동작을 제어하거나 변경할 수 있다.

2-1. 외부 API 호출

• 외부 API 서버에 HTTP 요청을 보내고 그에 대한 응답을 받아온다.
• 이를 통해 데이터를 가져오거나 업데이트할 수 있다.

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    // 데이터 처리 로직
  };

  fetchData();
}, []);

2-2. 데이터베이스 연동

• 데이터베이스와의 상호작용을 통해 데이터를 읽거나 쓰는 작업을 수행할 수 있다.
• 이를 통해 데이터의 영속성을 유지하고, 어플리케이션의 상태를 변경하거나 유지할 수 있다.

useEffect(() => {
  // 데이터베이스 연결 및 쿼리 실행
  // 데이터 처리 로직
}, []);

2-3. 파일 시스템 접근

• 로컬 파일 시스템이나 서버의 파일 시스템과 상호작용하여 파일을 읽거나 쓰는 작업을 수행할 수 있다.
• 파일 업도르, 다운로드, 파일 시스템 내의 파일 또는 폴더 생성 등이 해당된다.

useEffect(() => {
  // 파일 시스템 접근 및 파일 읽기/쓰기
  // 파일 처리 로직
}, []);

2-4. 외부 서비스 연결

• 다른 서비스와의 연결을 통해 어플리케이션의 동작을 제어하거나 데이터를 교환할 수 있다.
• 예를 들어, 메일 서비스와의 연동을 통해 이메일을 보내거나, SMS 서비스와의 연동을 통해 문자 메시지를 발송할 수 있다.

useEffect(() => {
  // 외부 서비스와 연결 설정
  // 연결된 서비스를 통한 동작 제어 또는 데이터 교환
  // 작업 처리 로직
}, []);

3. useEffect의 사용방법

useEffect 함수는 첫 번째 인자로 콜백 함수를 받으며, 두 번째 인자로 의존성 배열(dependency array)을 받는다.

• 의존성 배열이 비어있으면, 콜백 함수는 컴포넌트가 마운트될 때만 호출됨.
• 의존성 배열이 존재하면, 배열 내의 값이 변경될 때마다 콜백 함수가 호출됨.

1. useEffect(() => { //작업코드.. }) : 인자로 콜백함수를 받는다.

   렌더링 될때 마다 실행

2. useEffect(() => { //작업코드.. }, [value]) : 인자로 콜백함수와 배열을 받는다.

   화면에 첫 렌더링 될때 실행
   value 값이 바뀔때 마다 실행

4. 사용예시

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

const ExampleComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 마운트될 때 실행되는 작업
    console.log('Component mounted');

    // 데이터 가져오기
    fetchData();

    // 언마운트 시 정리 작업을 위한 함수 반환
    return () => {
      console.log('Component unmounted');
      // 정리 작업 수행
      cleanup();
    };
  }, []); // 빈 배열을 넣어서 마운트 시에만 실행되도록 설정

  useEffect(() => {
    // data 상태가 업데이트될 때 실행되는 작업
    console.log('Data updated:', data);
  }, [data]); // data가 변경될 때만 실행되도록 설정

  const fetchData = async () => {
    // 외부 API에서 데이터 가져오기
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();

    // 가져온 데이터를 상태로 업데이트
    setData(result);
  };

  const cleanup = () => {
    // 정리 작업 수행
    console.log('Cleaning up');
    // 구독 해제, 리소스 정리 등의 작업을 여기에 포함시킬 수 있습니다.
  };

  return (
    <div>
      <h1>Example Component</h1>
      {data ? (
        <p>Data: {data}</p>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
};

export default ExampleComponent;

참고자료

별코딩 - useEffect
React 공식문서