[React] useEffect()

useEffect()

📌 정의

React에서 제공하는 훅 중 하나로, 함수 컴포넌트에서 side effects를 다루기 위해 사용됩니다. side effects란 컴포넌트의 렌더링과는 직접적으로 관련이 없는 작업들을 의미한다. 예를 들어 데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등이 있다.

❗️특징

- useEffect는 component가 mount,unmount,update 됐을 때 특정 작업을 처리할 수 있다. 즉, 생명주기 메소드를 사용할 수 있다.

- 컴포넌트의 렌더링이 완료된 후에 실행되는 함수를 지정할 수 있으며 이 함수는 렌더링 결과물이 화면에 표시된 이후에 비동기적으로 실행된다.

- useEffect에 전달된 함수는 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 정리(clean-up) 함수를 반환할 수 있다.

✍ 예시 코드

기본 구조

useEffect(() => {
    // 여기에 side effect를 수행하는 코드 작성
    // ...

    // clean-up 함수를 반환할 수 있음
    return () => {
      // 정리(clean-up) 코드 작성
      // ...
    };
  }, [/* dependency 배열 */]);![](https://velog.velcdn.com/images/kwonyongyong/post/174d9451-2725-49bb-bb18-381fa657f371/image.jpeg)

mount 예시 코드

import React, { useEffect } from 'react';

function MountExample() {
  useEffect(() => {
    console.log('컴포넌트가 마운트됨');

    // 여기에 마운트 시에 수행할 작업 작성
    // 예: 데이터 가져오기, 초기화 등
    // ...

    // clean-up 함수
    return () => {
      console.log('컴포넌트가 언마운트됨');
      // 마운트 시에 수행한 작업에 대한 정리(clean-up) 코드 작성
      // ...
    };
  }, []); // 빈 배열이므로 처음 마운트될 때만 실행됨

  return (
    <div>
      {/* 컴포넌트의 나머지 내용 */}
    </div>
  );
}

export default MountExample;

update 예시 코드

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

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

  useEffect(() => {
    console.log('컴포넌트가 업데이트됨');

    // 여기에 업데이트 시에 수행할 작업 작성
    // 예: 상태 변경, 외부 데이터 갱신 등
    // ...

    // clean-up 함수 (이 경우, 업데이트 시에는 사용하지 않음)
  }, [count]); // count가 변경될 때마다 실행됨

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        카운트 증가
      </button>
    </div>
  );
}

export default UpdateExample;

unmount 예시 코드

import React, { useEffect } from 'react';

function UnmountExample() {
  useEffect(() => {
    console.log('컴포넌트가 마운트됨');

    // 여기에 마운트 시에 수행할 작업 작성
    // 예: 데이터 가져오기, 초기화 등
    // ...

    // clean-up 함수
    return () => {
      console.log('컴포넌트가 언마운트됨');
      // 마운트 시에 수행한 작업에 대한 정리(clean-up) 코드 작성
      // ...
    };
  }, []); // 빈 배열이므로 처음 마운트될 때만 실행됨

  // 컴포넌트의 나머지 내용

  return (
    <div>
      {/* 컴포넌트의 나머지 내용 */}
    </div>
  );
}

export default UnmountExample;