useEffect 훅의 이해 및 사용법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- React 개발자(중급)

- 함수형 컴포넌트로 전환 중인 개발자

- 라이프사이클 메서드 이해가 필요한 개발자

핵심 요약

• useEffect는 함수형 컴포넌트에서 사이드 이펙트(데이터 fetching, 이벤트 등록, 타이머 관리 등)를 처리하는 핵심 훅
• 의존성 배열([dependencies])을 통해 렌더링 시점에 따른 실행 제어 가능
• Cleanup 함수(return () => { ... })는 컴포넌트 언마운트 또는 의존성 변경 시 자동 실행
• 의존성 누락 → 데이터 오염, 불필요한 실행 → 성능 저하, 정리 누락 → 메모리 누수 발생 가능

섹션별 세부 요약

1. useEffect 훅의 목적

• 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 대체
• 렌더링 후 실행 → DOM 조작, API 호출, 이벤트 등록에 적합
• 의존성 배열을 통해 실행 조건 설정 가능

2. 기본 구조 및 파라미터

• 첫 번째 인자: 사이드 이펙트 로직을 포함하는 함수
• 두 번째 인자: 의존성 배열 → 빈 배열([])은 마운트 시 한 번만 실행
• return 문: cleanup 로직 → 컴포넌트 언마운트 또는 의존성 변경 시 실행

3. 실행 예시

• 렌더링 시마다 실행: useEffect(() => { console.log('Component rendered!'); });
• 마운트 시만 실행: useEffect(() => { console.log('Mounted!'); }, []);
• 의존성 값 변경 시 실행: useEffect(() => { console.log(Count: ${count}); }, [count]);
• 타이머 관리:

```javascript

useEffect(() => {

const interval = setInterval(() => console.log('Interval running'), 1000);

return () => clearInterval(interval);

}, []);

```

4. 주의사항 및 팁

• 의존성 누락: count가 업데이트 되더라도 useEffect가 실행되지 않을 수 있음
• 의존성 배열 생략 시: 매 렌더링마다 실행 → 성능 문제 발생
• cleanup 누락: 타이머, 이벤트 리스너 등이 메모리 누수로 남음

결론

• 의존성 배열을 명시적으로 사용하여 실행 조건을 명확히 하여야 하며, cleanup 로직을 반드시 포함해야 함
• useEffect는 함수형 컴포넌트에서 상태 및 DOM 조작을 관리하는 핵심 훅으로, 라이프사이클 메서드의 대체로 사용되며, 성능 최적화를 위해 의존성과 cleanup을 철저히 관리해야 함