useCallback
-
[React] useCallback으로 useEffect 무한루프 방지React 2023. 1. 12. 14:37
useEffect 무한루프 상황 문제 발생 const 부모컴포넌트 () => { const 부모함수 = () => { setState(...); }; return { } } const 자식컴포넌트 = ({함수}) => { useEffect(() => { 함수(); }, [함수]) ] 부모 컴포넌트에서 생성한 함수를 props로 받고 useEffect에서 사용했더니 무한루프를 하는 상황이 발생하였다. 부모 컴포넌트가 리렌더링 되는 경우 함수도 재생성되기 때문에 당연히 자식 컴포넌트도 리렌더링된다. useEffect에 의존성 배열을 넣었음에도 불구하고 전달된 함수는 다른 참조값을 가지기 때문에 (함수는 참조에 의한 전달) useEffect 콜백함수는 실행되어 state가 바뀌고 또 state가 바뀌면 컴포넌..