[ React ] useEffect (feat. 무한 렌더링)

useEffect는 꽤 다루기 까다롭습니다. 용도 자체가 부수작용을 일으키는 동작을 하여 예상 못한 부분에서 엉뚱한 동작을 일으키기도 하는데, 콜백 함수가 실행되는 건 의존하는 다른 대상의 상태를 따르기 때문이죠. 그래서 리액트로 개발하다보면 심심치 않게 무한 리렌더링 상황에 부딪히곤 합니다.

useEffect 동작 순서

1. 컴포넌트 렌더링
2. 화면에 반영 ( Paint )
3. useEffect 함수 실행
4. (리렌더링 시) 이전 부수작용 클린업
5. 새로운 부수작용 실행

useEffect가 주로 사용되는 상황

• 네트워크로 데이터 가져오기 (fetching)
• DOM 조작
• 구독과 해제
• 타이머 관리

 

useEffect 사용 코드 예시

https://codepen.io/www-r/pen/ByBjoeK

2024-12-05

 

---

참조

뉴스레터 푸딩캠프 ➡️ 뉴스레터 푸딩캠프 구독하기