useEffect

`useEffect`는 React의 Hook 중 하나로, 함수형 컴포넌트에서 부수 효과(side effects)를 관리하는 데 사용됩니다. 부수 효과란 데이터 가져오기, 구독 생성, DOM 수동 조작, 타이머 설정 등 컴포넌트의 렌더링과 직접적으로 관련되지 않은 작업을 의미합니다. `useEffect`는 두 개의 인자를 받습니다. 첫 번째 인자는 실행할 함수이고, 두 번째 인자는 의존성 배열입니다. 의존성 배열에는 `useEffect`가 실행될 조건을 설정할 수 있습니다. 배열이 비어있으면 컴포넌트가 처음 렌더링될 때만 실행되고, 특정 변수를 포함하면 그 변수가 변경될 때마다 실행됩니다. `useEffect` 내에서 반환되는 함수는 정리(cleanup) 함수로, 컴포넌트가 언마운트될 때나 다음 이펙트가 실행되기 전에 호출됩니다. 이를 통해 리소스를 해제하거나 구독을 종료하는 등의 작업을 수행할 수 있습니다. 간단한 예시로, 컴포넌트가 마운트될 때 API에서 데이터를 가져오는 경우를 들 수 있습니다: ```javascript import { useEffect, useState } from 'react'; function DataFetchingComponent() { const [data, setData] = useState(null); useEffect(() => { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => setData(data)); // Cleanup function (optional) return () => { // Perform any cleanup if necessary }; }, []); // 빈 배열로 설정하여 마운트 시에만 실행 return ( ); } ``` 이처럼 `useEffect`는 리액트 컴포넌트에서 복잡한 사이드 이펙트를 간편하게 처리할 수 있도록 도와줍니다.