왕가's history

useCallback useMemo와 비슷하게 메모리 낭비 및 성능최적화를 위해 사용되는 hook입니다. useMemo는 값을 저장하고 있었다고 하면, useCallback은 함수를 기억하고 있습니다. 컴포넌트 내부에서는 주로 간단한 함수보다는 함수 생성 자체의 비용이 클 때 사용하지만, 자식 컴포넌트에 함수를 props로 넘길 때는 해당 함수는 useCallback으로 감싸야한다. const 변수 = useCallback(()⇒{}), [deps]); deps에 의존성을 부여하여 해당 값이 변할 때 호출하게 됩니다. 이전에 사용했던 useEffect와 동일합니다. 예 HTML 삽입 미리보기할 수 없는 소스 onClick함수에 useCallback을 줌으로써 리렌더링 될 때, 함수가 다시 정의되는 것을 ..

useMemo 개발을 하다 보면, 리렌더링 될 때마다 전체가 동작하기 때문에 불필요한 부분도 계속 실행됩니다. 변수 값이 동일하거나 리렌더링 될 때마다 실행되면 메모리 낭비가 될 수 있으니, Hook을 사용하여 메모리에 값을 저장해 놓고, 필요할 때만 갱신할 수 있도록 합니다. const 변수 = useMemo(()⇒{}), [deps]); deps에 의존성을 부여하여 해당 값이 변할 때 호출하게 됩니다. 이전에 사용했던 useEffect와 동일합니다. 예 HTML 삽입 미리보기할 수 없는 소스 바닥에서 찍은 memo는 input태그 값이 변경될 때마다 찍히는 것을 확인할 수 있고, useMemo안에 있는데 test는 버튼을 누를 때, setClick으로 인해 click값이 변경될 때만 찍히는 것을 확인..