사이드이펙트 & useEffect()

useEffect()

React의 훅(Hook) 중 하나로, 함수형 컴포넌트에서 사이드 이펙트(side effects)를 처리할 수 있도록 해준다.

주요 기능은 컴포넌트가 렌더링된 이후나 특정 상태/props가 변경될 때 실행되는 코드를 정의

이전의 클래스형 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 생명주기 메서드를 사용했지만, 함수형 컴포넌트에서는 useEffect()로 같은 효과를 처리할 수 있다.

사이드 이펙트

데이터 페칭, DOM 업데이트, 구독, 타이머 설정 등의 작업으로,

이는 컴포넌트 렌더링에 직접적으로 관여하지 않는 로직을 의미한다.

 

useEffect() 의 문법

useEffect(() => {
  // 실행할 코드
  return () => {
    // 정리(cleanup)할 코드 (옵션)
  };
}, [의존성 배열]);

 

• 첫 번째 인자는 실행할 함수를 받는다.
• 두 번째 인자인 의존성 배열(dependency array)은 useEffect()가 언제 실행될지 제어한다.
• 특정 상태나 props가 변경될 때만 useEffect()를 실행할 수 있게 해준다.
  • 빈 배열 []을 전달하면, 컴포넌트가 처음 마운트될 때만 한 번 실행
  • 배열 안에 특정 변수를 넣으면 그 변수가 변경될 때마다 useEffect()가 실행
  • 의존성 배열을 생략하면, 컴포넌트가 렌더링될 때마다 useEffect()가 실행

예시

1: 데이터 페칭

import { useEffect, useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 컴포넌트가 마운트될 때 한 번만 실행
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data));
  }, []); // 의존성 배열이 비어 있으므로, 마운트 시에만 실행

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

useEffect()를 사용해 API로부터 데이터를 가져오고, 컴포넌트가 처음 마운트될 때만 실행

 

2: 타이머 설정 및 정리

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    // 매 초마다 count 증가
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    // 컴포넌트가 언마운트될 때 타이머 정리
    return () => {
      clearInterval(timer);
    };
  }, []); // 빈 배열이므로 컴포넌트 마운트 시 한 번 실행

  return <div>Count: {count}</div>;
}

export default Timer;

1초마다 count 값을 증가시키며, 컴포넌트가 언마운트될 때 clearInterval을 사용해 타이머를 정리

 

3: 특정 상태가 변경될 때만 실행

import { useEffect, useState } from 'react';

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

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

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

export default Counter;

count가 변경될 때마다 useEffect()가 실행되어 콘솔에 변경된 값을 출력

 

useEffect()는 이런 방식으로 다양한 사이드 이펙트를 관리할 수 있어,

함수형 컴포넌트의 생명주기를 간결하게 처리할 수 있게 해준다.