AI 요약관련 정보

• useEffect 내에서 props로 전달받은 함수(onChange)를 의존성 배열에 포함하면, 함수 참조의 불안정성으로 인해 불필요한 재렌더링이 반복적으로 발생합니다. 🔄
• 의존성 배열에서 함수를 제거하는 것은 React Hooks 규칙을 위반하고 ESLint 경고를 유발하므로 올바른 해결책이 아닙니다. 🚫
• 이 문제를 해결하기 위한 패턴은 useRef 훅을 사용하여 onChangeRef를 생성하고, 초기값으로 onChange 함수를 할당하는 것입니다. 💡
• 메인 useEffect 내부에서는 onChangeRef.current()를 호출하며, ref는 반응성이 없으므로 해당 useEffect의 의존성 배열에 포함할 필요가 없습니다. 🚀
• onChange 함수의 최신 값을 항상 동기화하기 위해, 의존성 배열이 없는(즉, 매 렌더링마다 실행되는) 두 번째 useEffect를 사용하여 onChangeRef.current를 최신 onChange prop으로 업데이트합니다. 🔄✨
• 이 패턴은 useEffect의 불필요한 재실행을 방지하면서도 항상 최신 버전의 함수를 사용할 수 있도록 보장하여, 함수 prop으로 인한 문제를 효과적으로 해결합니다. ✅