왕가's history

useCallback & useMemo 언제 사용해야 될까? 두 개의 hook에 대해서 다시 한번 다뤄보려고 합니다. 두 hook은 메모이제이션 되니깐 함수나 결과값이 있는 거에 전부 사용하면 좋지 않을까??라는 생각을 할 수 있을 것입니다. 그런 생각에 성능 좋아지겠지 하고 사용하다 보면 되려 성능저하가 될 수 있습니다. 왜냐면 결국 메모이제이션하는데에도 그만한 비용이 들기 때문입니다. 그렇기에 언제 쓰고, 언제 쓰면안좋은지에 대해 작성하려고 합니다. ❌사용하지 말아야 하는 경우 복잡하지 않은 연산에 사용하는것은 오히려 메모리 낭비입니다. onClick이벤트로 setState해주는 경우 같이 단순한 상황이라면, 리렌더링 된다고 하더라고 다시 그려주는 편히 훨씬 낫다고 볼 수 있습니다. React에서도 ..

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값이 변경될 때만 찍히는 것을 확인..