728x90 Memoization2 React useMemo 사용하기 useMemo란? useMemo는 React.memo()와 useCallback과 같이 컴포넌트를 최적화하기 위한 훅 중 하나다. useMemo를 사용하는 이유 React의 컴포넌트는 부모 컴포넌트가 렌더링되거나, 자신의 state 변경, 상위 컴포넌트에서 내려받는 props가 변경될 때마다 다시 렌더링된다. 그런데 내려받는 props나 state가 여러가지일때 한 개 props의 변경으로 모든 값이 다시 계산되는 경우 불필요한 비용이 누적되게 된다. useMemo는 이런 현상을 효율적으로 전환하기 위한 hook이다. useMemo를 적용하기 전 // 상위 컴포넌트 import { useState } from "react"; import { UseMemoChildren } from "./UseMemoCh.. 2023. 3. 16. React.memo 사용하기 유저에게 UI를 빠르게 제공하기 위해서는 컴포넌트의 렌더링을 최소화해 성능을 향상시킬 필요가 있다. 이를 위해 React.memo에 대한 간단한 사용법을 기록해본다. 1. React.memo() 컴포넌트가 React.memo()로 래핑될 때, React는 컴포넌트를 렌더링하고 결과를 Memoizing한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 Memoizing된 내용을 재사용한다. React.memo() 사용법 import React from "react"; export const MemoTest = ({ someProps }) => { console.log("Memo test, props 바뀔때만 콘솔 작동"); return ( MemoTest 컴포넌트 props가 바뀔때만.. 2023. 3. 16. 이전 1 다음 728x90
