useMemo
-
리액트 Hooks) useMemoReact 2022. 6. 17. 11:39
다음 코드를 보자. function calculate() { return 10; } function Component() { const value = calculate(); return {value}; } 함수형 컴포넌트가 렌더링 된다는 말은 그 함수가 호출된다는 말이다. 함수가 호출될 때마다 내부의 모든 변수들이 초기화 된다. 위 코드의 calculate()는 컴포넌트가 렌더링이 될 때마다 호출될 것이고, 무의미한 계산을 하는 반복적인 일이기 때문에 상당히 비효율적이다. 이때 useMemo를 사용하여 Memoization을 해주면 이런 상황을 간편하게 해결할 수 있다. useMemo의 구조 const value = useMemo(() => { return calculate(); }, [item]); 첫..