문제
리액트에서 수정하라고 하는 방식대로 수정하다가
useCallback을 사용하게 되었다.
컴포넌트가 리렌더링 될 때 함수를 재실행 하지 않기 위해서다.
성능에 영향을 크게 미치지는 않지만
어쨌든 재사용에 의의를 많이 두어야 하기 때문에 사용하나보다
사용법
const loadKaKaoMarkers = useCallback(() => {
// 내용
}, [map, setCurrentStore, storeDatas])
useEffect(() => {
loadKaKaoMarkers()
}, [loadKaKaoMarkers])
재사용할 함수를 useCallback으로 묶어준다.
그리고 의존성 배열에는 추천하는대로 넣으면 되는데
그 안에서 사용되는 변수를 넣어준다.
의문
근데 여기서
useEffect(() => {
loadKaKaoMarkers()
}, [map, setCurrentStore, storeDatas])그냥 useEffect의 의존성 배열에 저 변수들을 넣고
다시 실행하면 되는 거 아닌가? 라는 생각이 들었다.
왜냐면 위의 방법은
변수 변경 > 리렌더링시 함수 재생성 > 함수 재실행
아래의 방법은 변수 변경 > 함수 재실행
챗지피티(선생님의) 답변
- useCallback을 사용한 방법:
useCallback을 사용하면 함수가 해당 의존성 배열에 명시된 값들 중 하나라도 변경될 때만 새로운 함수를 생성합니다.
함수의 재생성을 방지하여 같은 함수를 유지하며, 의존성 배열 내의 값들이 변경될 때만 새로운 함수를 생성합니다.
- useEffect에서 직접 의존성 배열에 변수를 명시한 방법:
이 방법은 의존성 배열에 명시된 값들 중 하나라도 변경될 때마다 useEffect 콜백이 실행됩니다.
함수 자체를 아니라, 의존성 배열에 명시된 값들이 변경될 때마다 useEffect 콜백이 다시 실행됩니다.
이 경우에는 함수 자체의 재생성을 고려하는 것이 아니라, useEffect 콜백 함수의 실행 여부를 결정하는 것입니다.
따라서 useCallback을 사용하는 방법은 함수의 재생성을 방지하고, 의존성이 변경될 때마다 새로운 함수가 생성되는 것을 막아줍니다. 반면에 useEffect에서 의존성 배열에 직접 변수를 명시하는 경우에는 해당 변수들이 변경될 때마다 useEffect 콜백이 실행되기 때문에 함수의 재생성 여부보다는 useEffect 콜백의 실행 여부에 초점을 둡니다.
어쨌든 나는 재생성을 방지하고 재사용을 추구하는 컨셉인 리액트를 따르려면
useCallback + useEffect를 사용하는 방법이 더 맞는 것 같다.
