useMemo

useMemo와 useCallback의 차이는 뭘까

useMemo와 useCallback의 차이는 뭘까 둘다 연산 비용이 큰 작업을 최적화하려고 사용하는 리액트 훅입니다. 중요한 차이점은 반환 값과 사용 목적이라고 생각됩니다. useMemo 메모이제이션된 값을 반환하는 함수 연산 비용이 큰 작업의 결과값을 메모이제이션하여 불필요한 재연산을 방지하는 리액트 훅입니다. useMemo(() => { // 연산 비용이 큰 작업 return 결과값; }, [deps]); 의존성 배열로 넣어준, deps로 지정한 값이 변한다면 함수를 실행하고 그 함수의 반환 값을 반환합니다 useCallback 메모이제이션된 함수를 반환합니다 이벤트 핸들러와 같은 함수의 참조를 메모이제이션하여 불필요한 재렌더링을 방지합니다. 의존성 배열이 변경될때마다 새로운 함수 참조가 생성됩니다..

chatGPT를 사용한 리액트 최적화 [ memo, useMemo, useCallback ]에 대한 내용

chatGPT를 사용해서 리액트 최적화에 대한 내용을 물어보면 어떤식으로 답변이 나올지 궁금해졌다 간단하게라도 영어로 질문하는 것이 정확한 답변이 나올 것 같아 영어로 질문했다 chatGPT를 통해 얻어낸 답변은 다음과 같다 React.memo React.memo는 불필요한 재렌더링을 피함으로써 기능적 구성 요소의 성능을 최적화하는 데 도움이 되는 React JavaScript 라이브러리의 고차 구성 요소(HOC)입니다. shouldComponentUpdate클래스 기반 구성 요소 의 메서드에서 제공하는 것과 유사한 성능 향상을 제공하여 이를 수행합니다 . React.memo는 기능적 구성 요소를 인수로 사용하고 구성 요소의 새로운 메모 버전을 반환하는 방식으로 작동합니다. 메모화된 버전은 소품이 변경된..