- React 컴포넌트에서 특정 코드를 최초 마운트 시 단 한 번만 실행하는 방법에 대한 설명 🚀
useEffect
훅은 의존성 배열로 인해 원치 않는 재실행이 발생할 수 있으므로 적합하지 않음 😥useRef
훅을 사용하여 컴포넌트 내에서 직접 코드를 실행하고, ref 값을 통해 실행 여부를 추적 💡- ref는 컴포넌트의 리렌더링을 유발하지 않으므로 성능상 이점도 있음 ✨
useEffect
대신useRef
를 사용하여 의존성 관리 없이 코드를 한 번만 실행하는 것이 핵심 🔑hasRun
ref를 사용하여 코드 블록이 이미 실행되었는지 여부를 추적하고, 최초 렌더링 시에만 실행되도록 제어 🎯- 이 방법은 불필요한 side effect를 방지하고, 코드의 실행 횟수를 정확히 제어할 수 있게 해줌 ✅