DOTI Project

React 앱의 렌더링 성능을 높이기 위해서는 불필요한 연산과 렌더링을 줄이는 것이 핵심입니다. 이를 위해 React는 memo, useMemo, useCallback 같은 성능 최적화 도구를 제공합니다. 이번 글에서는 이 세 가지 개념을 실제 코드와 함께 쉽게 정리해보겠습니다.1. React.memo – 컴포넌트 메모이제이션React.memo는 props가 변경되지 않으면 컴포넌트의 리렌더링을 방지합니다.const Child = React.memo(function Child({ value }) { console.log('Child 렌더링'); return 값: {value};});부모 컴포넌트에서 state가 바뀌더라도 value props가 같다면 자식 컴포넌트는 렌더링되지 않습니다.2. useM..

React는 상태 변화 시 컴포넌트를 다시 렌더링합니다. 하지만 모든 리렌더링이 필요한 것은 아닙니다. 이 글에서는 불필요한 렌더링을 줄여 성능을 높이는 3가지 도구 React.memo, useCallback, useMemo를 소개합니다.1. React.memo – 컴포넌트 리렌더링 방지React.memo는 props가 바뀌지 않았다면 컴포넌트 렌더링을 건너뜁니다.const Child = React.memo(function Child({ name }) { console.log("렌더링됨"); return 이름: {name};});사용 시점: 자주 렌더링되는 부모 컴포넌트 아래 정적인 자식 컴포넌트가 있을 때2. useCallback – 함수 재생성 방지useCallback은 함수를 메모이제이션해서 불..

React 앱을 개발하다 보면 컴포넌트가 불필요하게 렌더링되는 상황을 마주하게 됩니다. 이런 경우 useMemo와 useCallback 훅을 사용해 성능을 최적화할 수 있습니다.1. useMemo란?useMemo는 계산 비용이 높은 값을 메모이제이션하여, 의존성이 변경될 때만 다시 계산하도록 도와줍니다.import { useMemo } from 'react';const expensiveValue = useMemo(() => { return computeHeavyTask(input);}, [input]);위 코드에서 computeHeavyTask는 input이 바뀔 때만 실행되고, 그 외에는 캐시된 결과를 반환합니다.2. useCallback이란?useCallback은 함수를 메모이제이션하는 데 사용됩니..