React에서 사이드 이펙트 처리의 최선 실천 방법

카테고리

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

서브카테고리

웹 개발

대상자

React 프레임워크를 사용하는 기능성 컴포넌트 개발자

(중급~고급 수준: useEffect, 커스텀 훅 사용 경험 필요)

핵심 요약

• useEffect 훅을 사용하여 모든 사이드 이펙트를 처리해야 하며, 렌더링 단계에서는 절대 실행 금지
• 의존성 배열([])에 모든 의존 요소를 명시하고, 메모리 누수 방지를 위한 cleanup 로직 필수
• 중복 로직은 커스텀 훅(useWindowWidth 등)으로 추출하여 재사용성 향상
• 비동기 작업은 useEffect 내부의 비동기 함수(loadData)로 처리해야 함

섹션별 세부 요약

1. 사이드 이펙트 정의 및 예시

• 사이드 이펙트는 API 호출, DOM 조작, 이벤트 리스너, 타이머 등 렌더링 외부 영향을 주는 작업
• 렌더링 단계에서 직접 실행 금지 (예: fetch(), setTimeout() 등)

2. `useEffect` 사용 패턴

• 의존성 배열([])에 의존하는 모든 상태/변수 명시 (예: useEffect(() => { ... }, [data]))
• cleanup 로직은 useEffect의 return 문으로 처리 (예: 이벤트 리스너 제거, 타이머 해제)

3. 잘못된 패턴 예시

• 렌더링 단계에서 직접 실행 (fetch() 호출) → 성능 저하 및 예측 불가능한 동작
• 하나의 useEffect로 모든 작업 처리 (God effect) → 유지보수성 저하

4. 커스텀 훅 사용 예시

• 중복 로직 추출 (예: useWindowWidth 훅)
• 재사용 가능한 로직을 컴포넌트 외부로 분리하여 테스트 및 관리 용이성 향상

5. 비동기 작업 처리

• useEffect 내부에 비동기 함수 정의 및 호출 (예: loadData 함수)
• 에러 처리 로직 포함 (try-catch 사용)

6. 상태 파생 로직 처리

• 렌더링 단계에서 파생 상태 계산 (예: const derivedState = someValue > 0)
• useEffect로 상태 업데이트 금지 (예: setDerivedState(someValue > 0) → 비추천)

결론

• 모든 사이드 이펙트는 useEffect로 처리하고, 의존성 배열과 cleanup 로직을 반드시 포함
• 중복 로직은 커스텀 훅으로 추출하여 재사용성과 가독성 향상
• 렌더링 단계에서 비동기 작업 금지 → 예측 가능한 상태 관리 및 성능 최적화 실현