React useEffect 완벽 가이드
React useEffect 훅을 사용하여 컴포넌트가 렌더링된 후 side effect를 관리하는 방법을 알아봅니다. 의존성 배열을 활용한 최적화, cleanup 함수를 통한 메모리 누수 방지 등
useEffect를 완벽하게 사용하는 방법을 살펴봅니다.
왜 useEffect가 필요할까요?
React 컴포넌트는 기본적으로 UI를 렌더링하는 역할을 합니다. 하지만 때로는 컴포넌트가 렌더링된 후에 특정 작업을 수행해야 할 때가 있습니다. 이러한 작업을 "side effect"라고 부르는데요. 예를 들어, API를 호출해서 데이터를 가져오거나, DOM을 직접 조작하거나, 타이머를 설정하는 것들이 side effect에 해당합니다.
① 문제 상황: 컴포넌트 렌더링 후 데이터 가져오기
만약 컴포넌트가 렌더링될 때 API를 호출해서 데이터를 가져와야 한다고 가정해봅시다. 단순히 컴포넌트 내에서 fetch 함수를 호출하면, 컴포넌트가 렌더링될 때마다 API가 계속 호출될 수 있습니다. 이는 불필요한 네트워크 요청을 발생시키고, 성능 저하를 야기할 수 있습니다.
javascript import React, { useState } from 'react';
function MyComponent() { const [data, setData] = useState(null);
// 렌더링될 때마다 API 호출 (문제 발생 가능성) fetch('/api/data') .then(response => response.json()) .then(data => setData(data));
if (!data) { return
; }
return
; }
export default MyComponent;
useEffect 핵심 개념
useEffect 훅은 이러한 side effect를 안전하고 효율적으로 관리할 수 있도록 도와줍니다. useEffect를 사용하면 컴포넌트가 렌더링된 후에 특정 함수를 실행할 수 있으며, 의존성 배열을 통해 함수의 실행 시점을 제어할 수 있습니다.
| 항목 | 설명 |
|---|---|
| 콜백 함수 | useEffect 훅에 전달되는 함수로, side effect를 수행하는 코드를 포함합니다. |
| 의존성 배열 | useEffect 훅의 두 번째 인자로 전달되는 배열입니다. 이 배열에 포함된 값이 변경될 때마다 콜백 함수가 실행됩니다. |
| Cleanup 함수 | 콜백 함수 내에서 반환되는 함수입니다. 컴포넌트가 언마운트되거나, useEffect가 다시 실행되기 전에 호출되어 리소스를 정리하는 데 사용됩니다. |
[컴포넌트 렌더링] --> [useEffect 실행] --> [API 호출, DOM 조작 등]
useEffect 단계별 사용법
① 1단계: 기본 사용법
가장 기본적인 사용법은 useEffect 훅에 콜백 함수를 전달하는 것입니다. 이 경우, 컴포넌트가 처음 렌더링될 때와 업데이트될 때마다 콜백 함수가 실행됩니다.
javascript import React, { useEffect } from 'react';
function MyComponent() { useEffect(() => { console.log('컴포넌트가 렌더링되었습니다.'); });
return
; }
export default MyComponent;
② 2단계: 의존성 배열 사용
의존성 배열을 사용하면 useEffect 훅이 실행되는 시점을 제어할 수 있습니다. 의존성 배열에 특정 값을 포함시키면, 해당 값이 변경될 때만 콜백 함수가 실행됩니다. 빈 배열 ([])을 전달하면, 컴포넌트가 처음 렌더링될 때만 콜백 함수가 실행됩니다.
javascript import React, { useState, useEffect } from 'react';
function MyComponent() { const [count, setCount] = useState(0);
useEffect(() => { console.log('count 값이 변경되었습니다:', count); }, [count]); // count 값이 변경될 때만 실행
return (
Count: {count}
<button onClick={() => setCount(count + 1)}>Increment); }
export default MyComponent;
③ 3단계: Cleanup 함수 사용
Cleanup 함수는 컴포넌트가 언마운트되거나, useEffect가 다시 실행되기 전에 호출되어 리소스를 정리하는 데 사용됩니다. 예를 들어, 타이머를 설정한 경우 Cleanup 함수에서 타이머를 제거해야 합니다. 이를 통해 메모리 누수를 방지할 수 있습니다.
javascript import React, { useState, useEffect } from 'react';
function MyComponent() { const [count, setCount] = useState(0);
useEffect(() => { const intervalId = setInterval(() => { setCount(prevCount => prevCount + 1); }, 1000);
// Cleanup 함수
return () => {
clearInterval(intervalId);
console.log('타이머가 제거되었습니다.');
};
}, []); // 컴포넌트가 처음 렌더링될 때만 실행
return (
Count: {count}
); }
export default MyComponent;
자주 묻는 질문
Q: useEffect 안에서 async 함수를 직접 사용할 수 있나요?
A: useEffect 훅에 전달되는 콜백 함수는 동기 함수여야 합니다. 따라서 async 함수를 직접 사용할 수 없습니다. 대신, 콜백 함수 내에서 async 함수를 호출하는 방법을 사용할 수 있습니다.
javascript import React, { useState, useEffect } from 'react';
function MyComponent() { const [data, setData] = useState(null);
useEffect(() => { async function fetchData() { const response = await fetch('/api/data'); const data = await response.json(); setData(data); }
fetchData();
}, []);
if (!data) { return
; }
return
; }
export default MyComponent;
마무리
useEffect 훅은 React 컴포넌트에서 side effect를 관리하는 데 필수적인 도구입니다. 의존성 배열과 Cleanup 함수를 적절히 활용하면, 효율적이고 안전하게 side effect를 처리할 수 있습니다. useEffect를 제대로 이해하고 사용하면 React 개발 실력을 한 단계 더 끌어올릴 수 있을 거예요. 저도 처음에는 헷갈렸는데, 여러 번 사용해보니 감이 오더라고요. 여러분도 꾸준히 연습해서 useEffect 마스터가 되시길 바랍니다!