useMemo

 

 

React Hook

CPU 소모가 심한 함수들을
캐싱해 최적화

 

What ?

useMemo

계산 비용이 많이 드는 함수의 결과값을 "기억"하고, 의존성 배열(dependency array)의 값이 변경되지 않는 한 이전에 계산한 값을 재사용하도록 도와줍니다.

 

주로 불필요한 렌더링을 방지하기 위해 사용됩니다.

 

계속 입력을 하면 대규모 성능 병목 현상 을 유발하는 기능이 실행됩니다.

---

How ?

useMemo

💡 useMemo(( ) => function, [input_dependency])

// 적용 예시

function ExampleComponent() {
    const [exampleState, setExampleState] = useState(0)

   const resCount = useMemo(()=> {
        return exampleFunction(count)
    }, [count])

    return (
        <div>
            Count: {resCount}
            <input type="text" onChange={(e)=> setExampleState(e.target.value)} placeholder="Set Count" />
        </div>
    )
}

const exampleFunction = (count)=> {
	waitSync(1000);
	return count * 10;
}

 

기능	설명
function	캐시 할 함수입니다.
[ input_dependency]	캐시 할 function에 대한 입력 배열로, 값이 변경될 시 재 호출됩니다.

---