[React] useCallback으로 useEffect 무한루프 방지

useEffect 무한루프 상황 문제 발생

const 부모컴포넌트 () => {
 const 부모함수 = () => {
 	setState(...);
 };
 
 return {
 	<하위컴포넌트 함수={부모함수} />
 }
}


const 자식컴포넌트 = ({함수}) => {
     useEffect(() => {
          함수();
     }, [함수])
]

부모 컴포넌트에서 생성한 함수를 props로 받고 useEffect에서 사용했더니 무한루프를 하는 상황이 발생하였다.

부모 컴포넌트가 리렌더링 되는 경우 함수도 재생성되기 때문에 당연히 자식 컴포넌트도 리렌더링된다. useEffect에 의존성 배열을 넣었음에도 불구하고 전달된 함수는 다른 참조값을 가지기 때문에 (함수는 참조에 의한 전달) useEffect 콜백함수는 실행되어 state가 바뀌고 또 state가 바뀌면 컴포넌트가 리렌더링 되기 때문에 결국 무한루프가 생겨버린다.

 

useCallback 사용을 위한 해결

const 부모컴포넌트 () => {
 const 부모함수 = useCallback(() => {...}, []);
 
 return {
 	<하위컴포넌트 함수={부모함수} />
 }
}


const 자식컴포넌트 = ({함수}) => {
     useEffect(() => {
          함수();
     }, [함수])
]

useCallback은 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 hook이다. (의존성 배열에 넣은 값이 변경되기 전까지 재사용) 부모함수에 useCallback을 감싸서 다시 코드를 실행했더니 무한루프 문제가 해결이 되었다.

 

 

 

 

 

 

 

 

- useEffect 안에 또 다른 로직들이 있어서 그 때문이라 생각하고 삽질하느라 시간이 걸렸다. 차근차근 생각해보면 좀 더 빠르게 알 수 있던 문제였다.