AI 요약관련 정보

• useEffect 이해의 핵심은 리액트 컴포넌트의 "렌더링" 개념을 정확히 아는 것입니다. 🖼️
• 렌더링은 useState로 관리되는 상태(state)가 변경될 때마다 컴포넌트 함수 전체가 다시 실행되는 것을 의미합니다. ♻️
• useEffect 훅은 컴포넌트가 렌더링된 이후에 실행되며, 코드 내 위치와 상관없이 렌더링 완료 후 로직이 발동됩니다. ⏱️
• useEffect의 실행 시점은 의존성 배열(dependency array)을 통해 세 가지 방식으로 제어할 수 있습니다. ⚙️
• 의존성 배열이 없거나 undefined인 경우, useEffect는 매 렌더링 이후에 계속 실행됩니다. 🔄
• 의존성 배열이 빈 배열([])인 경우, useEffect는 컴포넌트가 최초 마운트될 때 단 한 번만 실행됩니다. 🚀
• 의존성 배열에 특정 변수(예: [count])를 넣으면, 해당 변수가 변경될 때마다 useEffect가 실행됩니다 (최초 렌더링 시에도 실행). 🎯
• 불필요한 렌더링을 줄이기 위해, useEffect 내에서 연쇄적인 상태 변경을 유발하기보다는 컴포넌트 함수 본문에서 파생 상태를 계산하는 것이 성능에 유리합니다. ⚡
• useEffect는 특정 조건(예: count가 3 또는 6일 때)에 따라 useRef를 사용하여 DOM 요소에 포커스를 주는 등 다양한 사이드 이펙트(side effect)를 처리하는 데 활용될 수 있습니다. 💡
• useEffect는 의존성 배열의 유무와 내용에 따라 발동 시점을 정교하게 제어하는 것이 중요합니다. ✅