by

react에서 useEffect란?

react에서 useEffect란?

useEffect는 리액트에서 부수효과(side effects)를 처리하는 데 사용되는 hook입니다.

컴포넌트가 렌더링된 후, 데이터를 가져오거나 구독을 설정하거나 타이머를 시작하는 등의 작업을 할 때 유용하게 사용됩니다.

쉽게 말해서 jquery의 document.ready와 비슷하다 생각하면 됩니다.

예를 들어 화면이 렌더링 된뒤에 api 데이터를 가져와서 처리를 해야 한다던지 할 때 좋습니다.

이번 포스트에서는 useEffect의 기본 사용법과 함께 다양한 예제를 살펴보겠습니다.

useEffect란?

useEffect는 리액트 훅으로 렌더링 된 뒤에 처리하는 기능을 제공합니다. 컴포넌트의 렌더링 외부에서 일어나는 작업들, 예를 들어 데이터 가져오기, 타이머 설정, 구독 관리 등을 의미합니다.

useEffect는 컴포넌트가 렌더링된 후 또는 의존성 배열에 있는 값이 변경될 때 실행됩니다.

useEffect 기본 사용법

useEffect는 두 가지 주요 매개변수를 받습니다:

  • 실행할 함수: 부수효과를 수행하는 함수
  • 의존성 배열 (optional): 특정 값이 변경될 때만 useEffect를 실행하도록 설정

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

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('컴포넌트가 렌더링된 후 실행됩니다.');
  }, [count]); // count가 변경될 때마다 실행

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default ExampleComponent;

useEffect 의존성 배열

useEffect의 두 번째 매개변수인 의존성 배열은 이 배열에 있는 값들이 변경될 때마다 useEffect를 실행하도록 설정할 수 있습니다. 배열에 아무 값도 넣지 않으면, useEffect는 컴포넌트가 처음 렌더링될 때만 실행됩니다.


// 의존성 배열에 count를 넣으면, count가 변경될 때마다 useEffect가 실행됩니다.
useEffect(() => {
  console.log('count가 변경되었을 때만 실행됩니다.');
}, [count]);

// 빈 의존성 배열 사용 시, 컴포넌트가 처음 렌더링될 때만 실행됩니다.
useEffect(() => {
  console.log('컴포넌트가 처음 렌더링될 때만 실행됩니다.');
}, []);

클린업 함수

부수효과가 완료된 후, 리소스를 정리할 때 클린업 함수를 사용할 수 있습니다. 예를 들어, 타이머를 설정하거나 외부 데이터베이스에 구독을 설정할 때, 컴포넌트가 언마운트될 때 리소스를 정리하는 코드가 필요합니다.


useEffect(() => {
  const timer = setInterval(() => {
    console.log('타이머 작동 중');
  }, 1000);

  // 컴포넌트가 언마운트되거나 의존성 배열이 변경될 때 타이머를 정리합니다.
  return () => clearInterval(timer);
}, []);

다양한 useEffect 예제

예제 1: API 호출 후 상태 업데이트


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

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

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => setData(json));
  }, []); // 컴포넌트가 처음 렌더링될 때만 호출

  if (!data) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h3>{data[0].title}</h3>
    </div>
  );
};

export default FetchDataExample;

예제 2: 타이머 설정


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

const TimerExample = () => {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);

    return () => clearInterval(interval); // 타이머 클린업
  }, []);

  return (
    <div>
      <p>Time: {time} seconds</p>
    </div>
  );
};

export default TimerExample;

예제 3: 상태 변경 시 다른 작업 수행


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

const StatusExample = () => {
  const [status, setStatus] = useState('offline');

  useEffect(() => {
    if (status === 'online') {
      console.log('유저가 온라인 상태입니다!');
    }
  }, [status]);  // status가 변경될 때마다 실행

  return (
    <div>
      <p>Status: {status}</p>
      <button onClick={() => setStatus('online')}>Go Online</button>
    </div>
  );
};

export default StatusExample;

결론

useEffect는 리액트에서 화면이 렌더링 된 뒤에 뭔가를 처리할 때 유용합니다.

데이터 fetching, 타이머 설정, 구독 관리 등 다양한 부수효과를 처리할 수 있으며, 의존성 배열과 클린업 함수를 사용하여 효율적으로 리소스를 관리할 수 있습니다.

다양한 예제를 통해 useEffect의 활용법을 익혀보세요.

Leave a Comment