React 애플리케이션에서 과도한 최적화는 최악의 상황을 나타낸다. 몇몇의 개발자들은 useMemo와 useCallback을 개발에서 기본 사항으로 넣어서 모든 곳에 사용한다. 하지만 useMemo는 오히려 애플리케이션의 속도를 저하시킬 수 있다. 명심해야할 것은 메모이제이션은 공짜가 아니다! 우리는 왜 useMemo를 사용할까? useMemo는 컴포넌트의 리렌더링 사이에서 계산 결과를 캐시에 저장하는 Hook이다. React.memo, useCallback, 디바운싱, 동시 렌더링(Concurrent Rendering) 등과 함께 사용해서 성능상 이점을 준다. 이것이 특정 상황에선 정말 도움이 되고 중요한 역할을 하는 것은 맞지만, 대부분은 부적절한 방법인, 모든 변수를 useMemo로 래핑한다. 당연..

시나리오 React Memo를 사용할 때 같이 이야기가 나오는 친구가 바로 useCallback이다 그래서 useCallback을 사용할 때와 사용하지 않은 함수를 비교한다. 머리론, useCallback이 의미없이 사용되면 일반 함수보다 시간이 더 오래 걸릴 거라는 생각이 들었다. 작업 import React, { useState } from "react"; import { useCallback } from "react"; import styled from "styled-components"; const ChildComponentOne = ({ photos }) => { console.log("ChildComponentOne Render"); const handleClick1 = useCallback(..