useEffect

 

React의 useEffect 훅은 함수 컴포넌트 내에서
부수 효과(side effects)를 처리하기 위해 사용됩니다.

 

리액트 공식 문서에서 보면 "리액트는 side effect라는 것을 처리하기 위해 useEffect를 사용합니다."라고 적혀 있습니다.

side effect
일반적으로 함수 또는 프로그램의 실행이 외부 환경에 영향을 미치는 것을 의미합니다.

 

side effect 예시

• 데이터 가져오기: API 호출, 데이터베이스 쿼리 등의 비동기 작업을 수행할 때 사용됩니다.
• 상태 업데이트: 특정 상태 값이 변경될 때 다른 상태 값을 업데이트하는 작업에 활용됩니다.
• DOM 조작: 컴포넌트가 렌더링 된 후에 DOM 요소에 접근하고 조작하는 작업을 수행할 때 사용됩니다.
• 이벤트 리스닝: 특정 이벤트(예: 클릭, 스크롤)를 감지하고 처리하기 위해 사용됩니다.
• localStorage를 사용하는 경우

 

side effect 를 이해하려면 순수 함수라는 것을 이해해야 합니다.

순수함수

const App({name}) {
  return (<div>{name}</div>);
};

 

이러한 코드가 있을때 이 함수를 순수 함수라고 합니다. 왜 그런 걸까요?
위 App 함수는 같은 입력에 대해 항상 같은 결과를 반환해 줄 것입니다.
즉 name 값이 들어올때 항상 div tag 안에는 똑같은 name 값이 들어간다는 말입니다.
즉 외부와 전혀 관련이 없고, 함수 외부에 영향을 주지 않습니다.
이러한 함수들을 순수함수라고 하며 참조에 투명(referentially transparent)하다고 합니다.

리액트는 컴포넌트가 최대한 순수 함수를 유지할 것을 권장하고 있으며,
실제로 그렇게 구현해야 컴포넌트 재사용성이 증가하고 예측 및 테스트를 쉽게 할 수 있습니다.

만약 해당 함수가 같은 입력임에도 다른 결과를 내거나,
함수 외부에 영향을 미치게 될 때, side effect가 있다고 하며,
이러한 함수들을 참조에 불투명(referentially opaque)하다고 합니다.

 

useEffect 란?

useEffect는 컴포넌트가 최대한 순수 함수가 될 수 있도록 side effect를 따로 관리할 수 있도록 합니다.

 

useEffect가 실행되는 시점은 컴포넌트가 렌더링된 이후입니다.

여기서 말하는 렌더링은 사실 두 가지를 의미하는데, 첫째는 맨 처음 컴포넌트가 렌더링 되어 화면(DOM)에 마운트 되는 시점입니다.

두 번째는 state나 prop이 변하여 컴포넌트가 재렌더링되는 시점을 말합니다.

그렇다면 useEffect는 왜 렌더링이 일어난 후에 실행되는 것일까요??

쉽게 생각해 보자면 만약 컴포넌트 외부에 존재하는 DOM에 접근하고자 한다고 생각해 봅시다.

만약 렌더링이 다 이루어지기 전에 useEffect가 동작해서 해당 DOM을 찾지 못하는 상황이 발생하면 오류가 발생할 것입니다.

리액트는 이러한 side effect가 발생하는 시점이 렌더링이 발생하는 이후가 적당하다고 판단하였죠.

useEffect 의 사용법

// 매 렌더링마다 실행
useEffect(() => {});

// 컴포넌트가 처음 렌더링된 실행
useEffect(() => {}, []);

// 컴포넌트가 처음 렌더링된 이후 실행
// a나 b가 변경되어 컴포넌트가 재렌더링된 이후 실행
useEffect(() => {}, [a, b]);

 

첫 번째 매개변수에는 함수를 작성합니다. 이 코드는 컴포넌트가 렌더링 될 때마다 실행됩니다.

두 번째 매개변수인 의존성 배열에는 그 값이 바뀔 때마다 첫 번째 매개변수에 있는 함수를 재실행 시켜줍니다.

기본적인 사용법

import { useEffect } from "react";

const Test = () => {

  useEffect(() => {
    getData(); <-- 데이터를 가져오는 비동기 함수( API 호출 )
  }, [])

  return (
    <div> test </div>
  )
}

이렇게 비동기 함수를 useEffect 내부에 선언하면 component 가 렌더링이 끝난 후에 getData() 함수를 실행시켜 줍니다.

useEffect 는 대부분 데이터를 가져오는 비동기 함수를 이용해야 할 때 가장 많이 쓰입니다.

그 외에는 잘 쓰이지 않지만 어떻게 쓰이고 어떤 방식으로 작동하는지 보고 싶다면 심화 사용법을 읽으시면 됩니다.

심화 사용법

데이터 가져오기

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

function DataFetchingExample() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 데이터를 가져오는 비동기 함수 (예: API 호출)
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.com/posts/1');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {loading ? (
        <p>Loading data...</p>
      ) : data ? (
        <div>
          <h1>Title: {data.title}</h1>
          <p>Body: {data.body}</p>
        </div>
      ) : (
        <p>Data not available.</p>
      )}
    </div>
  );
}

export default DataFetchingExample;

 

상태 업데이트

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

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

  useEffect(() => {
    // 컴포넌트가 렌더링될 때마다 실행됩니다.
    console.log('Component has re-rendered.');

    // 카운트가 변경될 때 실행되는 부수 효과
    document.title = `Count: ${count}`;
  }, [count]); // count 상태가 변경될 때만 useEffect 실행

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

export default Counter;

 

이벤트 리스너

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

function EventListeningExample() {
  const [message, setMessage] = useState('');

  const handleKeyDown = () => {
     //...
  }

  useEffect(() => {
    // 이벤트 리스너 설정
    const handleKeyDown = (event) => {
      setMessage(`Key pressed: ${event.key}`);
    };

    // 컴포넌트가 마운트될 때 이벤트 리스너 추가
    window.addEventListener('keydown', handleKeyDown);

    // 컴포넌트가 언마운트될 때 이벤트 리스너 제거
    // 언마운트 라는 뜻은 해당 요소가 화면에 보이지 않을때를 의미합니다.
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []); // 빈 의존성 배열은 컴포넌트가 마운트될 때 한 번만 실행

  return (
    <div>
      <p>{message}</p>
      <p>Press any key to see the message.</p>
    </div>
  );
}

export default EventListeningExample;

 

Dom 조작

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

function DOMManipulationExample() {
  const [backgroundColor, setBackgroundColor] = useState('white');

  useEffect(() => {
    // DOM 요소에 스타일 변경
    const container = document.getElementById('container');
    container.style.backgroundColor = backgroundColor;
  }, [backgroundColor]);

  const changeBackgroundColor = () => {
    // 배경색 변경
    setBackgroundColor('lightblue');
  };

  return (
    <div>
      <div id="container">
        <p>Click the button to change the background color.</p>
      </div>
      <button onClick={changeBackgroundColor}>Change Background Color</button>
    </div>
  );
}

export default DOMManipulationExample;

 

cleanup 함수

cleanup 함수는 내가 정의한 코드를 메모리에서 없애주는 아주 좋은 기능입니다.

API 요청으로 인한 데이터 획득, DOM 조작 등의 행위는 일반적으로 문제가 되지 않지만,

특정 작업의 경우에는 메모리 누수 등의 문제를 해결해야 하기 때문에 cleanup 함수가 등장하게 되었습니다.

 

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

function EventListenerComponent() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    // 이벤트 리스너를 추가
    const handleMouseOver = () => {
      setMessage('Mouse is over the component.');
    };

    const handleMouseOut = () => {
      setMessage('Mouse is out of the component.');
    };

    document.addEventListener('mouseover', handleMouseOver);
    document.addEventListener('mouseout', handleMouseOut);

    // Cleanup 함수: 컴포넌트가 언마운트될 때 이벤트 리스너 제거
    return () => {
      document.removeEventListener('mouseover', handleMouseOver);
      document.removeEventListener('mouseout', handleMouseOut);
    };
  }, []); // 빈 배열을 전달하여 최초 렌더링 시에만 실행

  return (
    <div>
      <p>{message}</p>
    </div>
  );
}

export default EventListenerComponent;