React 애플리케이션을 개발할 때 상태 변화에 따라 특정 동작을 수행해야 하는 경우가 있습니다. 이런 경우에 useEffect 훅을 사용하여 효과적으로 처리할 수 있습니다. JSX 파일에서 useEffect 훅을 사용하는 방법을 알아보겠습니다.

1. useEffect 훅이란?

useEffect는 React 함수 컴포넌트에서 부수 효과(side effects) 를 수행할 수 있게 해주는 특별한 훅입니다. 이 훅을 이용하면 컴포넌트가 렌더링될 때마다 특정 동작을 수행하거나, 컴포넌트가 제거될 때 정리 작업을 수행할 수 있습니다.

2. JSX에서 useEffect 훅 사용하기

아래는 JSX 파일에서 useEffect 훅을 사용하는 간단한 예제입니다.

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

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

  useEffect(() => {
    // 여기에 특정 동작을 수행하는 코드를 작성합니다.
    document.title = `You clicked ${count} times`;
  }, [count]); // 이 의존성 배열은 count 상태가 변경될 때에만 효과를 다시 적용합니다.

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

export default ExampleComponent;

위 예제에서 useEffect 훅을 사용하여 count 상태가 변경될 때마다 페이지의 제목을 업데이트하는 동작을 수행하고 있습니다.

결론

useEffect 훅은 React 애플리케이션에서 특정 상태 변화에 대응하여 부수 효과를 처리할 수 있는 강력한 도구입니다. JSX 파일에서 useEffect 훅을 적절히 활용하여 애플리케이션의 동작을 효율적으로 제어할 수 있습니다.

참고문헌:

• React 공식 문서 - useEffect