반응형

useCallback 2

React 리팩토링 - 불필요한 연산을 줄여보자, props를 복사해서 사용하지 않기, useMemo 사용하기

useMemo란?useMemo는 React에서 컴포넌트 성능 최적화를 위해 제공하는 훅입니다. 특정 값이 재계산될 필요가 없을 때 이전 계산 값을 재사용하여 불필요한 계산을 방지합니다.const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 1. 불필요한 계산 방지- 복잡한 계산(비용이 많이 드는 함수 호출 등)의 결과를 캐싱합니다.- 종속성 배열([])의 값이 변경될 때만 재계산이 일어납니다. 2. 참조 유지- 이전에 계산된 값을 재사용하므로 매번 새로운 값 생성이 방지됩니다.- 이는 React에서 props 전달 시 메모이제이션된 객체나 배열의 참조를 유지하는 데도 유용합니다. 예시1. 비용이 큰 계산 로직 - items가 변..

카테고리 없음 2025.01.17

React Component 나누는 기준, 메모이제이션?, useRef, useMemo, useCallback

React에서 Component를 나누는 기준 재사용성 DRY - Don't Repeat Yourself 단일책임 SR - Single Responsibility useMemo, useCallback등을 통한 최적화를 하는 이유? - 함수형 컴포넌트는 단순히 그냥 함수이다. jsx를 반환하는 함수이다. - 컴포넌트가 렌더링 된다는 것은 누군가 그 함수(컴포넌트)를 호출하여 실행되는 것을 의미한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또 다른 함수 등)도 매번 다시 선언되어 사용된다. - 컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경되었을 때마다 리렌더링 된다. 하위 컴포넌트에서 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않더라도 리..

React 2023.11.17
반응형