전체 방문자
오늘
어제
  • 전체 글
    • HTML
    • CSS
    • Javascript
    • React
    • Typescript
    • Next.js
    • Webpack
    • Vue.js
    • Git & GitHub
    • Error
    • Study
    • 개발 일지✨

블로그 메뉴

  • 💡
  • ⚙️
hELLO · Designed By 정상우.
하루

Home

컴포넌트 최적화 정리 (useMemo/useCallback/React.memo)
React

컴포넌트 최적화 정리 (useMemo/useCallback/React.memo)

2022. 5. 9. 16:32

[React/리액트] 리액트 컴포넌트 최적화 정리 (useMemo/useCallback/React.memo)

 

  • useMemo : 연산된 값을 재사용
  • useCallback : 특정 함수 재사용
  • React.memo : 컴포넌트 렌더링 결과물을 재사용

상태 관리 시 함수형 업데이트를 하면 최신 상태를 참조하기 때문에 useCallback 의 deps 에 넣지 않아도 된다.

useMemo, useCallback, React.memo 는 컴포넌트의 성능을 실제로 개선할 수 있는 상황에서만 사용하는 것이 좋다.

(🚨 불필요한 비교 & 버그 발생)

 

    'React' 카테고리의 다른 글
    • useReducer
    • 함수형 업데이트 useState
    • React.memo 를 사용한 컴포넌트 리렌더링 방지
    • useCallback 으로 함수 재사용하기

    티스토리툴바