- React에서
useEffect 훅은 가장 과도하게 사용되고 잘못 사용되는 훅이며, 많은 개발자가 데이터 가져오기, 상태 동기화 등 다양한 용도로 사용하고 있습니다. 🎣
useEffect를 과도하게 사용하는 것은 흔한 실수이며, 많은 경우에 더 나은 대안이 존재합니다. 🤕
- 상태를 기반으로 색상을 결정하는 예제에서,
useEffect 대신 이벤트 핸들러 내에서 직접 상태를 업데이트하는 것이 더 효율적입니다. 🎨
- 데이터 가져오기 시
useEffect를 사용하는 대신, Tanstack Query와 같은 데이터 가져오기 라이브러리나 서버 사이드 렌더링을 활용하는 것이 좋습니다. 📚
- 파생된 값을 계산할 때
useEffect와 useState를 함께 사용하는 대신, 컴포넌트 내에서 직접 계산하거나 useMemo를 사용하는 것이 더 효율적일 수 있습니다. 💡
- 전역 이벤트 리스너를 사용할 때
useEffect는 유효한 사용 사례가 될 수 있지만, JSX 내장 이벤트 리스너를 먼저 고려해야 합니다. 👂
- DOM 요소와 직접 상호 작용해야 하는 경우 (예: 요소의 크기 측정)
useEffect를 사용하는 것이 적절합니다. 📐