React Hook : **`useEffect`** __()__

useEffect는 React Hooks API 중 하나로, 컴포넌트가 렌더링될 때마다 특정 동작을 수행하도록 설정할 수 있습니다. 이를 통해 컴포넌트의 라이프사이클 메서드를 대체할 수 있습니다.

useEffect는 컴포넌트가 처음 마운트될 때, 업데이트될 때, 혹은 언마운트될 때마다 실행할 수 있습니다. 이를 위해 useEffect 함수는 첫 번째 인자로 콜백 함수를 받습니다. 이 콜백 함수는 컴포넌트가 마운트될 때 한 번 실행되고, 이후 컴포넌트가 업데이트될 때마다 실행됩니다. 만약 컴포넌트가 언마운트될 때 정리(clean-up) 작업이 필요하다면, 이 콜백 함수에서 정리 작업을 수행할 수 있습니다.

useEffect 함수의 두 번째 인자로는 의존성 배열(dependency array)을 전달할 수 있습니다. 이 배열에 포함된 값이 변경될 때만 콜백 함수가 실행됩니다. 이를 통해 불필요한 연산을 줄이고 성능을 최적화할 수 있습니다. 빈 배열([])을 전달하면 마운트될 때만 콜백 함수가 실행됩니다.

useEffect 함수는 콜백 함수의 반환값으로 정리(clean-up) 함수를 반환합니다. 이를 활용하여 컴포넌트가 언마운트될 때 필요한 정리 작업을 수행할 수 있습니다. 만약 의존성 배열이 변경될 때마다 실행되는 부수 효과를 생성하는 경우, 정리 함수를 통해 부수 효과를 제거할 수 있습니다.

아래는 useEffect 함수를 사용한 예시 코드입니다.

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

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>+</button>
    </div>
  );
}

위 코드에서는 useEffect 함수를 사용하여 컴포넌트의 타이틀을 업데이트합니다. 의존성 배열에 count 변수를 전달하므로써 count 변수가 변경될 때마다 타이틀이 업데이트됩니다. 이를 통해 컴포넌트의 렌더링이 발생할 때마다 타이틀이 업데이트되는 불필한 작업을 방지할 수 있습니다.

또 다른 예시로, useEffect 함수를 사용하여 데이터를 불러오는 작업을 수행할 수 있습니다. 이때 비동기적으로 데이터를 불러와야 하므로 async 함수를 콜백 함수로 사용할 수 없습니다. 대신 useEffect 함수 내에서 async/await 구문을 사용하여 비동기 작업을 수행할 수 있습니다.

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

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchPosts() {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await response.json();
      setPosts(data);
    }

    fetchPosts();
  }, []);

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

위 코드에서는 useEffect 함수를 사용하여 데이터를 불러옵니다. 의존성 배열에 빈 배열([])을 전달하므로써 컴포넌트가 마운트될 때 한 번만 데이터를 불러오고, 이후에는 업데이트되지 않습니다. fetchPosts 함수 내에서 fetch 함수를 사용하여 데이터를 불러오고, await 구문을 사용하여 비동기 작업을 수행합니다. 이후에 setPosts 함수를 사용하여 상태를 업데이트합니다.

useEffect 함수를 사용할 때는 다음과 같은 사항을 고려해야 합니다.

1. 의존성 배열을 잘 설정해야 합니다. 필요한 경우 의존성 배열을 사용하여 불필요한 연산을 줄이고 성능을 최적화할 수 있습니다.

2. 부수 효과 함수에서는 불변성을 유지해야 합니다. 상태를 업데이트할 때는 이전 상태를 기반으로 새로운 상태를 생성하는 함수를 사용해야 합니다.

3. 부수 효과 함수에서는 비동기 작업을 수행할 수 있습니다. 이때 async/await 구문을 사용하여 비동기 작업을 수행합니다.

4. 부수 효과 함수에서는 정리 함수를 반환할 수 있습니다. 이를 통해 컴포넌트가 언마운트될 때 필요한 정리 작업을 수행할 수 있습니다.

이상으로 useEffect 함수에 대한 설명을 마칩니다. useEffect 함수는 컴포넌트에서 부수 효과를 다루는 가장 일반적인 방법 중 하나이며, React Hooks API를 이해하는 데 필수적인 개념입니다.

내저장소 바로가기 luxury515