유튜브블로그Top 10
내 프로필

데브허브 안내
소개업데이트 소식

데브허브 커뮤니티

How to Run Code Only Once in React

Cosden Solutions

2025. 8. 8.

0

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

Recommanded Videos