나디아 성장 일기

📌 useMemo(): 계산된 값을 메모이제이션하여, 종속성 배열 값이 변경되지 않는 한 불필요한 재계산을 방지하는 훅 값의 메모이제이션(값의 캐싱)을 통해 성능 최적화를 위해 사용 종속성 배열에 명시된 값이 변경되지 않는 한, 이전에 계산된 값을 재사용한다. (React는 기본적으로 컴포넌트가 리렌더링될 때마다 모든 변수를 재계산한다.) ➡︎ 불필요한 재계산 방지➡︎ 계산이 비싼 작업일 때, 성능 향상주로 계산량이 많거나, 리렌더링 시 재계산할 필요가 없는 값을 메모이제이션(memoization)하는 데 사용메모이제이션 된 컴포넌트가 불필요한 렌더링을 반복한다면, useMemo()를 사용하여 불필요한 렌더링을 줄일 수 있다.(메모이제이션 된 컴포넌트를 렌더링 제어하는 핵심 ➡︎ 컴포넌트 속성(prop..

📌 memo(): 컴포넌트의 props가 변경되지 않은 경우, 컴포넌트 리렌더링을 건너뛸 수 있는 훅성능 최적화를 위한 함수형 컴포넌트를 위한 기능컴포넌트가 불필요하게 리렌더링되는 것을 방지하는 데 사용memo는 이전과 새로운 props를 비교하여 변경이 있을 때만 컴포넌트를 리렌더링 한다.컴포넌트를 memo로 감싸면 해당 컴포넌트의 memoized 버전을 얻을 수 있다.memoized 버전의 컴포넌트는 부모 컴포넌트가 리렌더링 되어도 props가 변경되지 않았다면 리렌더링 되지 않는다.그러나 memoization는 성능을 최적화하는 것이지 보장하지 않기 때문에 React는 리렌더링 될 수도 있다. import { memo } from 'react';const SomeComponent = memo(fu..

📌 useCallback(): 컴포넌트가 리렌더링될 때, 함수가 불필요하게 다시 생성되는 것을 방지하기 위해 사용 함수의 메모이제이션(기억화)을 위해 사용하위 컴포넌트에 전달하는 속성 타입이 함수인 경우 캐싱(caching)할 때 사용리렌더링 시 함수 참조를 유지하고 싶을 때, 특히 자식 컴포넌트에 콜백 함수를 전달할 때 유용하다.해당 함수의 종속성(dependency) 배열에 지정된 값들이 변경되지 않는 한, 리-렌더링 간에 동일한 함수임을 보장하여 동일한 함수 인스턴스를 재사용할 수 있다.불필요한 함수 재생성을 방지하여, 성능 최적화에 도움이 된다.메모이제이션 된 함수가 많아지면, 관리 비용이 오히려 커질 수 있기 때문에 반드시 필요할 때만 사용하는 것이 좋다.  ⏩ useCallback 사용 이유..