AI 요약관련 정보

• useEffect 사용 시 흔한 실수 3가지와 이를 줄이는 방법 제시 🧑‍🏫
• 첫 번째 실수는 DOM 조작 관련 작업을 useEffect 내에서 수행하는 것 🏗️
• 해결책으로 React는 useLayoutEffect 훅을 제공, 실행 타이밍을 조절 ⏱️
• 두 번째 실수는 useEffect 클린업 함수에서 이벤트 리스너 제거를 누락하는 것 🧹
• 클린업 함수는 메모리 누수를 방지하기 위해 필수적 ⚠️
• 세 번째 실수는 useEffect 의존성 배열(deps)에 아이템을 누락하는 것 🧮
• 누락 시 이펙트가 제대로 재실행되지 않아 문제 발생 🐞
• 해결책은 useEffect의 동작 원리를 깊이 이해하는 것 💡
• 렌더링 과정: 렌더 페이지 -> 커밋 페이지 (패시브 이펙트) 🔄
• 렌더 페이지: 컴포넌트 함수 실행, 파이버 트리 생성 및 비교, 훅 추가, 이펙트 생성 및 업데이트 큐 등록 🌳
• 커밋 페이지: 플러시 패시브 이펙트 함수 스케줄링 (DOM 업데이트 및 브라우저 페인트 완료 후 실행) ⏱️
• 패시브 이펙트 실행: 플러시 패시브 이펙트 함수 호출 -> 커밋 훅 이펙트 리스트 마운트 함수에서 업데이트 큐 참조 -> 등록된 콜백(create) 호출 📞
• 이펙트는 서큘러 링크드 리스트로 관리됨 🔗
• 클린업 함수는 이펙트 실행 전에 항상 먼저 실행됨 (업마운트 시점) 🗑️
• 업데이트 시에는 rook input equal 함수로 의존성 배열 비교 🔍
• 뎁스 비교 로직을 이해하고, ESLint 등을 활용하여 누락 방지 🛡️
• useLayoutEffect는 커밋 페이지 직전에 실행되므로 DOM 관련 작업에 적합 🎯