React 의 useEffect 를 쉽게 이해해보자!

React를 사용하다 보면, 컴포넌트가 화면에 나타나거나 사라질 때, 또는 특정 값이 변경될 때 어떤 작업을 하고 싶을 때가 많습니다. 예를 들어, 데이터를 가져오거나, 타이머를 설정하거나, 특정 작업을 정리(cleanup)해야 할 때 말이죠. 이럴 때 우리가 사용하는 것이 바로 useEffect입니다.

 

useEffect를 사용하면 컴포넌트가 렌더링될 때 또는 특정 값이 바뀔 때 필요한 작업을 자동으로 처리할 수 있습니다. 이번 글에서는 useEffect의 다양한 사용 시점을 알아보고, 실제 예시 코드를 통해 그 사용법을 익혀보도록 하겠습니다.

 

 

useEffect의 사용 시점

useEffect는 다음과 같은 시점에서 사용됩니다.

1. 컴포넌트가 처음 화면에 나타날 때
2. 특정 값이 바뀔 때
3. 컴포넌트가 매 렌더링마다 실행될 때
4. 컴포넌트가 화면에서 사라질 때

 

1. 컴포넌트가 처음 화면에 나타날 때

컴포넌트가 처음 렌더링될 때 한 번만 실행하고 싶은 코드가 있을 때 사용합니다. 예를 들어, 컴포넌트가 처음 나타날 때 데이터를 서버에서 가져오는 작업을 수행할 수 있습니다.

useEffect(() => {
  // 컴포넌트가 처음 화면에 나타날 때 한 번 실행됨
  console.log('컴포넌트가 처음 렌더링됐어!');
}, []);

 

여기서 끝에 [] 빈 배열을 주목해주세요. 빈 배열을 두 번째 인자로 주면, 이 useEffect는 컴포넌트가 처음 화면에 나타날 때 한 번만 실행됩니다.

 

 

2. 특정 값이 바뀔 때

어떤 특정 값이 바뀔 때마다 실행하고 싶은 코드가 있을 때 사용합니다. 예를 들어, 사용자가 입력한 값이 변경될 때마다 이를 처리하는 작업을 수행할 수 있습니다.

useEffect(() => {
  // 특정 값(count)이 바뀔 때마다 실행됨
  console.log(`count 값이 ${count}로 바뀌었어!`);
}, [count]);

 

이 코드에서는 count 값이 변경될 때마다 useEffect 안의 코드가 실행됩니다. 이때 count는 두 번째 인자로 전달된 배열 안에 있습니다.

 

 

3. 컴포넌트가 매 렌더링될 때

컴포넌트가 매 렌더링될 때 실행하고 싶은 코드가 있을 때 사용합니다. 이 경우 두 번째 인자로 빈 배열도, 특정 값도 전달하지 않으면 됩니다.

useEffect(() => {
  // 매 렌더링마다 실행
  console.log('컴포넌트가 렌더링됐어!');
});

 

이 useEffect는 컴포넌트가 처음 렌더링될 때뿐만 아니라, 상태나 props가 바뀌어서 컴포넌트가 다시 렌더링될 때마다 실행됩니다.

 

 

4. 컴포넌트가 화면에서 사라질 때

컴포넌트가 화면에서 사라질 때 실행하고 싶은 정리 작업이 있을 때 사용합니다. 예를 들어, 타이머를 정리하거나 이벤트 리스너를 제거하는 작업을 할 수 있습니다.

useEffect(() => {
  console.log('컴포넌트가 렌더링됐어!');

  return () => {
    // 컴포넌트가 화면에서 사라질 때 실행됨
    console.log('컴포넌트가 사라지고 있어!');
  };
}, []);

 

이 예시에서는 컴포넌트가 처음 렌더링될 때 console.log를 실행하고, 컴포넌트가 화면에서 사라질 때 return 뒤에 있는 함수가 실행됩니다.

 

 

예시로 쉽게 이해하기

이제 실제 예시를 통해 useEffect가 어떻게 작동하는지 알아볼까요?

예를 들어, 단어들을 순차적으로 화면에 나타나게 해봅시다. 각 단어는 0.3초 간격으로 하나씩 나타나야 합니다.

import { useEffect, useState } from "react";

export default function WordList({ words = [] }) {
  const [visibleItems, setVisibleItems] = useState([]);

  useEffect(() => {
    words.forEach((word, index) => {
      setTimeout(() => {
        setVisibleItems((prevItems) => [...prevItems, word]);
      }, index * 300); // 각 단어가 0.3초 간격으로 나타남
    });
  }, [words]);

  return (
    <ul>
      {visibleItems.map((word, index) => (
        <li key={index}>
          {word}
        </li>
      ))}
    </ul>
  );
}

 

이 코드가 하는 일은 다음과 같습니다.

1. useEffect가 실행되면서, words 배열에 있는 단어들을 하나씩 순차적으로 보여줍니다.
2. setTimeout을 사용해 각 단어가 나타나는 시간을 0.3초 간격으로 조절합니다.
3. setVisibleItems 상태를 업데이트해서, 시간이 지날수록 더 많은 단어들이 화면에 나타나도록 합니다. 
   *참고로 `prevItems` 인수는 자동으로 `setVisibleItems` 함수에 전달 됩니다.

 

아래는 예시 코드를 응용하여 구현한 영상입니다.

 

 

마무리

`useEffect` 는 React 에서 컴포넌트의 생명 주기 동안 발생하는 중요한 시점들을 관리하고, 원하는 작업을 자동으로 처리할 수 있게 해주는 유용한 훅입니다. React 로 개발할 때 useEffect 훅을 적재적소에 활용해보시기 바랍니다.