React useEffect 예제

React useEffect란 무엇인가요?

React는 UI를 구축하기 위한 JavaScript 라이브러리입니다. useEffect는 React의 라이프사이클 메소드 중 하나로, 컴포넌트가 렌더링될 때마다 특정한 작업을 수행할 수 있도록 해줍니다. 이번 글에서는 React useEffect에 대해 예제와 함께 자세히 설명해보겠습니다.

React의 라이프사이클 메소드

React에서는 라이프사이클 메소드를 사용하여 컴포넌트의 생명주기를 관리합니다. 이 메소드들은 컴포넌트가 생성되고, 업데이트되고, 제거될 때 자동으로 호출됩니다. useEffect는 이러한 라이프사이클 메소드 중 하나이며, 컴포넌트가 렌더링될 때마다 실행됩니다.

useEffect의 기본 사용법

useEffect는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 함수이며, 두 번째 매개변수는 배열입니다. 함수는 컴포넌트가 렌더링될 때마다 실행되며, 배열에는 useEffect가 의존하는 변수들을 넣습니다.

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

위 예제에서는 버튼을 클릭할 때마다 count가 증가합니다. useEffect는 count가 변경될 때마다 실행되며, 문서의 제목을 업데이트합니
다.

useEffect의 종류

useEffect는 종류에 따라 다양한 방식으로 사용될 수 있습니다. 가장 일반적인 예제는 API 호출과 같은 비동기 작업을 수행할 때 사용하는 것입니다.

componentDidMount 대체하기

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

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

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

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

위 예제에서는 API를 호출하여 데이터를 가져오고, 데이터가 없으면 "Loading..."을 표시합니다. 데이터가 있으면 각 항목의 이름을 출력합니다.

componentDidUpdate 대체하기

useEffect를 사용하면 componentDidUpdate를 대체할 수 있습니다. useEffect의 두 번째 매개변수 배열에 상태값을 포함시켜 놓으면 해당 상태값이 업데이트될 때마다 useEffect가 실행됩니다.

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

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  useEffect(() => {
    console.log(`You clicked ${count} times`);
  }, [count]);

  useEffect(() => {
    console.log(`Your name is ${name}`);
  }, [name]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <input value={name} onChange={e => setName(e.target.value)} />
    </div>
  );
}

위 예제에서는 count와 name이 변경될 때마다 useEffect가 실행되며, 변경된 값을 console에 출력합니다.

useEffect의 주의사항

useEffect는 컴포넌트가 렌더링될 때마다 실행됩니다. 따라서, 너무 많은 useEffect를 사용하면 애플리케이션의 성능에 영향을 미칠 수 있습니다. 또한, useEffect에서 상태값을 변경하는 경우 무한 루프에 빠질 수 있습니다.

결론

React useEffect는 컴포넌트의 생명주기를 관리하고, 특정 작업을 수행할 수 있도록 해줍니다. 이를 활용하면 비동기 작업이나, componentDidUpdate를 대체할 수 있습니다. 하지만, 주의사항에 유의하여 사용해야 합니다.

FAQ

useEffect는 어떤 상황에서 사용하나요?

• 컴포넌트가 렌더링될 때마다 실행되는 작업을 수행할 때 사용합니다.

useEffect에서 상태값을 변경하면 어떻게 되나요?

• 무한 루프에 빠질 수 있으므로, 주의해서 사용해야 합니다.

useEffect 대신 componentDidMount와 componentDidUpdate를 사용해도 되나요?

• useEffect는 두 메소드를 대체할 수 있습니다.

useEffect에서 API 호출을 어떻게 처리하나요?

• useEffect 안에서 비동기 작업을 처리하면 됩니다.

useEffect를 사용하면 성능에 영향을 미칠까요?

• 너무 많은 useEffect를 사용하면 성능에 영향을 미칠 수 있습니다.