Learn React useEffect in 2024 (Plain & Simple)
- React useEffect 훅은 컴포넌트 렌더링 후 실행되며 초기 렌더링 시 한번만 실행되도록 하려면 비워진 배열을 의존성 배열로 사용. 👀
- 의존성 배열에 변수를 추가하면 해당 변수의 값이 변경될 때마다 useEffect 훅이 실행되도록 설정. ⏳
- useEffect 훅 내에서 API를 호출하는 경우, 의존성 배열에 필요한 변수 추가를 통해 데이터 업데이트 시 새로운 API 호출을 유도. 🌐
- ESLint 경고 메시지를 무시하지 않고 의존성 배열에 변수를 적절하게 포함하여 useEffect 훅의 예상치 못한 동작을 방지. ⛑️
- useEffect 훅의 업데이트 함수 기능과 함께 불필요한 useEffect 호출로 인한 애니메이션 효과를 최적화. 🚀
- useEffect 훅의 클리너 함수를 활용하여 컴포넌트 제거 시 Timer 컴포넌트와 같이 간접 변경이 발생하지 않도록 setInterval을 정지시켜 기억 누수를 방지. 🧹