[JavaScript] React useEffect() 이벤트 훅

 

 

 

React useEffect() 이벤트 훅에 대해 알아보기

---

 

 

 

useEffect란?

useEffect는 React 함수형 컴포넌트에서 부수 효과(side effects)를 처리하기 위해 사용하는 훅입니다. 부수 효과는 컴포넌트가 렌더링된 후에 발생하는 작업을 말하며, 데이터 fetching, 구독(subscription) 설정, 수동으로 DOM 조작 등이 포함됩니다.

 

기본 사용법

useEffect 훅은 두 개의 인자를 받습니다: 첫 번째 인자는 실행할 함수이고, 두 번째 인자는 의존성 배열입니다.

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    console.log('Component rendered or updated');

    // Clean up function (optional)
    return () => {
      console.log('Cleanup on component unmount or before next effect');
    };
  }, []); // 빈 배열은 의존성이 없음을 의미

  return <div>Hello, world!</div>;
}

 

위 예제에서 useEffect는 컴포넌트가 렌더링될 때마다 콘솔에 메시지를 출력합니다. 두 번째 인자로 빈 배열 []을 전달하면 컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.

 

 

 

의존성 배열

의존성 배열(dependency array)을 사용하면 특정 값이 변경될 때만 useEffect가 실행되도록 할 수 있습니다.

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

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

  useEffect(() => {
    console.log(`Count has changed to ${count}`);
  }, [count]); // count가 변경될 때만 실행

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

 

위 예제에서 useEffect는 count 상태가 변경될 때마다 실행됩니다.

 

 

 

 

정리(cleanup) 함수

useEffect는 정리(cleanup) 함수를 반환할 수 있으며, 컴포넌트가 언마운트될 때나 다음 렌더링 전에 실행됩니다.

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);

    // Cleanup 함수
    return () => {
      clearInterval(interval);
    };
  }, []); // 빈 배열로 설정하여 컴포넌트 마운트 시에만 실행

  return <div>Seconds: {seconds}</div>;
}

 

이 예제에서 setInterval을 사용해 1초마다 seconds 상태를 증가시키고 있으며, 컴포넌트가 언마운트될 때 clearInterval을 호출하여 타이머를 정리합니다.

 

 

 

 

여러 개의 useEffect 사용

하나의 컴포넌트에서 여러 개의 useEffect 훅을 사용할 수 있습니다. 각각의 useEffect는 독립적으로 동작합니다.

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

function MultiEffectComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  useEffect(() => {
    console.log(`Count has changed to ${count}`);
  }, [count]);

  useEffect(() => {
    console.log(`Text has changed to ${text}`);
  }, [text]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase count</button>
      <p>Text: {text}</p>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}

이 예제에서는 count와 text 두 가지 상태를 관리하며, 각 상태가 변경될 때마다 개별적으로 useEffect가 실행됩니다.