useEffect 와 useCallback 방지, 무한루프
작성자 : 조회수 :
왜 루프가 생기는가?
inc가 의존성이어서 매 렌더 후 effect가 다시 돈다.- effect 안에서
setN → 또 리렌더 → 또 새로운 inc → 또 effect… 무한 루프 조건 성립.
무한루프 막는법
1) useCallback으로 함수 참조를 고정
[] 덕분에 inc 참조는 고정.- 내부에서
n을 직접 읽지 않고 setN(v => v + 1)처럼 함수형 업데이트를 쓰면 stale 클로저 문제를 피하면서도 의존성을 비울 수 있다.
- 포인트:
useCallback은 “참조 안정화”가 목적이다. 리렌더를 막지 않는다. 다만 “참조 비교”가 중요한 상황(자식에게 prop으로 넘길 때 React.memo와 함께, 혹은 effect 의존성에 있을 때)에서 이득이 있다.
2) 함수 본문을 아예 effect 안으로 이동
- 바깥의 함수를 의존성으로 넣을 이유가 없어져서 루프 리스크가 사라진다.
3) 컴포넌트 밖(모듈 스코프)에 정의
- 그 함수가 props/state를 전혀 읽지 않는 순수 유틸이라면 컴포넌트 밖에 두면 참조가 고정된다.
4) useRef로 최신 함수를 보관하는 패턴
- 콜백 참조를 effect 의존성에서 빼고 싶지만 최신 구현을 쓰고 싶을 때:
