Lo9

const debounce 사용하기 = ( Param ) => {💻 return Result;import _ from "lodash";import React, { useMemo } from "react";// state에 의해 페이지가 다시 렌더링 되었을 때 debounce가 초기화 되므로 정상적인 동작 X// 따라서 Memoization 필요const debounceFunc = useMemo( () => _.debounce( () => { // debounce 처리할 함수 }, // 임계시간(ms): debounce 처리할 시간간격 300, ..

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 최적화 부분에 대해서 수강하고 내용을 정리한다. 목차 1. useMemo( ) - 연산 재사용하기 2. React.memo( ) - 컴포넌트 재사용하기 3. useCallback( ) - 함수 재상용하기 useMemo( ) - 연산 재사용하기 컴포넌트들을 작성하다 보면 한 번 연산한 이후 계산할 필요가 없을 때가 있다. 이때 연산 결과를 재사용하므로써 연산을 줄일 수 있다. 이를 Memoization이라 부르고 이는 프로그래밍 기법에 가깝다. 즉, Memoization은 계산 해둔 연산의 결과 값을 기억해 두었다가 동일한 계산을 시키면, 새로 연산하지 않고 결과 값을 반환시켜 연산을 줄이는 것이다. simple-da..