useEffect 멈춰!

카테고리

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

서브카테고리

웹 개발

대상자

• React 개발자, 중급 이상의 프론트엔드 개발자*
• 난이도: 중간 (React 렌더링 흐름 이해 필요)*

핵심 요약

• useEffect는 "렌더링 외부의 동작"에만 사용해야 합니다.
• 계산, 파생값 처리는 useMemo 또는 렌더링 내부에서 직접 수행해야 합니다.
• 불필요한 useEffect 사용은 성능 저하와 예측 불가능한 렌더링 타이밍을 유발합니다.

섹션별 세부 요약

1. **useEffect의 과용 문제**

• 렌더링 중 계산 → useEffect 대신 useMemo 사용
• 예: useEffect(() => { const result = expensiveCalculation(input); setResult(result); }, [input]) → useMemo(() => expensiveCalculation(input), [input])
• 렌더링 흐름 이해 부족
• React: 렌더링 → DOM 반영 → useEffect 실행 순서 따름
• 불필요한 상태 관리
• 예: count로 파생된 double은 useState 대신 useMemo 또는 직접 계산

2. **useEffect의 올바른 사용 시점**

• 외부 API 호출
• fetch, axios 등 비동기 데이터 처리 시
• 이벤트 리스너 등록/해제
• window.addEventListener, document.addEventListener
• 타이머 설정
• setTimeout, setInterval
• 외부 라이브러리 연동
• 지도, 차트, 3rd-party 라이브러리 연결 시
• 상태 → 외부 동기화
• localStorage, document.title, URL 등 브라우저 상태 반영

3. **렌더링 중 vs. 외부 동작 구분**

• 렌더링 중 처리 가능한 작업
• useMemo → 계산, 파생값
• useCallback → 함수 캐싱
• useState → 상태 관리
• 렌더링 외부 동작
• useEffect → DOM 조작, 이벤트 리스너, 타이머, 외부 API 호출
• DOM 접근 시 useRef + useEffect 조합 사용

결론

• 렌더링 중 계산은 useMemo로, 외부 동작은 useEffect로 분리하세요.
• 불필요한 useEffect 실행은 성능 저하의 주요 원인입니다.
• useEffect는 "렌더링 외부의 일"에만 사용해야 합니다.