10. Hooks를 활용한 상태 관리 - 2

useEffect 훅을 이용한 부수 효과 관리

React 함수형 컴포넌트에서 부수 효과를 다루기 위해 제공되는 useEffect 훅은 매우 강력하면서도 다양한 상황에서 활용될 수 있습니다. 이번 글에서는 useEffect 훅의 핵심 개념과 실제 활용법에 대해 자세히 알아보겠습니다.

useEffect 훅 소개

useEffect 훅은 React 컴포넌트의 렌더링 사이에 발생하는 작업을 수행할 수 있게 해주는 특수한 목적의 훅입니다. 주로 데이터 가져오기, 구독 설정, 수동으로 컴포넌트 업데이트 등의 작업을 다룹니다.

useEffect 훅의 사용법

useEffect는 컴포넌트가 마운트될 때, 업데이트될 때, 언마운트될 때 등 특정 상황에서 작업을 수행하도록 설정할 수 있습니다.

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

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

  // 컴포넌트가 마운트될 때 데이터 가져오기
  useEffect(() => {
    fetchData();
  }, []); // 빈 배열을 전달하면 마운트될 때만 실행

  // 컴포넌트가 업데이트될 때마다 제목 출력
  useEffect(() => {
    console.log('컴포넌트가 업데이트되었습니다.');
  });

  // 컴포넌트가 언마운트될 때 정리 작업 수행
  useEffect(() => {
    return () => {
      console.log('컴포넌트가 언마운트되었습니다.');
    };
  }, []);

  // ...

  return (
    <div>
      {/* 컴포넌트 렌더링 */}
    </div>
  );
}

useEffect의 활용

데이터 가져오기와 상태 업데이트

useEffect(() => {
  const fetchData = async () => {
    const result = await api.fetchData();
    setData(result);
  };
  fetchData();
}, []);

 

이벤트 리스너 등록 및 해제

useEffect(() => {
  const handleClick = () => {
    console.log('버튼이 클릭되었습니다.');
  };
  document.addEventListener('click', handleClick);
  return () => {
    document.removeEventListener('click', handleClick);
  };
}, []);

 

타이머 설정 및 해제

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('타이머 작동 중...');
  }, 1000);
  return () => {
    clearInterval(timerId);
    console.log('타이머가 해제되었습니다.');
  };
}, []);

useEffect 훅의 주의사항

1. 의존성 배열 사용: 특정 상태나 프롭스에 의존하는 경우 해당 값을 의존성 배열에 명시해주어야 합니다.
2. 정리 작업 필요시 반환 함수 사용: 컴포넌트가 언마운트되거나 업데이트 직전에 정리 작업이 필요한 경우 반환 함수를 활용합니다.

마무리

useEffect 훅은 React 함수형 컴포넌트에서 부수 효과를 효과적으로 관리하는 데에 필수적입니다. 적절한 사용으로 컴포넌트의 생명 주기와 관련된 작업들을 선언적으로 다룰 수 있습니다. 이를 통해 코드의 가독성을 높이고 유지보수성을 강화할 수 있습니다. 반드시 필요한 경우에만 사용하고 의존성 배열과 반환 함수를 올바르게 활용하는 것이 중요합니다.