# useMemo
[React Docs] useMemo
useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 React 훅이다.값을 재사용하여 성능 최적화를 돕는 역할을 한다.반환값을 캐싱하는 것을 memoization이라 하여 useMemo라고 부른다.리액트는 초기 렌더링 중에 calculateValue함수를 호출
(SEB_FE) Section4 Unit3 useMemo & useCallback 간단 실습
실제로 연산 로직에 영향을 주는 값은 val1과 val2 값인데, 보다시피 그 두 값이 아닌 name 값을 수정해도 add 함수가 계속 같은 결과값을 리턴함에도 불구하고 불필요하게 계속 호출되고 있는 상태이다. useMemo를 사용해서 add 함수의 호출을 최소화할 수
(SEB_FE) Section4 Unit3 React Hooks
함수 컴포넌트와 클래스 컴포넌트의 차이를 학습하고, 함수 컴포넌트에서 Hook을 사용하는 이유를 이해합니다.Hook의 사용 규칙에 대해 학습하고 이해합니다.useMemo의 쓰임새와 작성 방법에 대해 학습합니다.useCallback의 쓰임새와 작성 방법에 대해 학습합니다
useMemo
useMemo는 이전 값을 기억해서 성능을 최적화하는 용도로 사용된다. useMemo에서 memo는 memoization을 의미한다. 프로그램이 동일한 연산을 반복해야 할 때, useMemo hook에 의존하고 있는 배열인 의존성배열에 입력한 값이 변하지 않는다면 기존
react 리렌더링 줄이기 (react Memo)
cat bot에서 새로운 기능인 고양이가 있는지 없는지 ? 에 대해 선택을 받도록 기능 구현을 하였다.
2023. 4. 25~27
Index 성능최적화 - react developer tools memoization(useCallback,useMemo) map,memo(key-uuid?) CRP(Critical Rendering Path) Reflow, Repaint prefetch, preloa
[TIL 0425] Memoization
✅ 알아두면 유용한 개발자 도구 > 설치는 구글 웹스토어에서 진행 > 1. Apollo Client Devtools → 설치후 app.tsx에서 client 설정 부분에 connectToDevTools : true로 설정해야 한다. > 2. wappalyzer →
React에서 useMemo와 useCallback
계산 비용이 높은 함수의 결과 값을 기억하고, 이전에 계산한 결과 값을 재사용할 수 있도록 합니다. 이 Hook은 함수형 컴포넌트에서 사용됩니다. 이전에 계산된 값과 현재 값이 동일하다면, 이전에 계산된 값을 반환합니다. 그러나 이전에 계산된 값과 현재 값이 다르다면,
⚠️ useMemo 의 사용에 주의하세요
useMemo는 컴포넌트 리렌더링 간에 계산 결과를 캐싱할 수 있는 Hook(훅)이다. 그래서 성능상의 이유로만 사용되며, useCallback, 디바운싱, 동시 렌더링 등과 같은 기술과 함께 사용해야 한다. 이 훅은 일부 상황에서는 굉장히 도움이 되지만, 대부분의 개
[React]-리렌더링을 방지하자! useCallback(), useMemo(), memo()
useCallback, useMemo.. 차이는 뭔데..
useMemo, useCallback, React.memo
useMemo와 useCallback는 컴포넌트 성능 최적화를 위해 사용되는 React의 대표적인 Hook이다. 두 가지 개념을 알아보기 전 먼저 memoization을 알아보자. memoization? > 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에
리액트 (useMemo)
useMemo > - memoization: 먼저 메모이제이션이라고 하는 개념에 대해 확실히 알아가야하는데, 메모이제이션은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 이것을 적절하게 활용하면 중복 연산을
리액트 (useRef)
Dom요소에 접근을 위해 사용이 되는 React hooks 이다. Ref는 reference의 약자로 '참조'라는 뜻이며 참조한 값을 저장하고 있는 공간이다. useState는 state값이 바뀌면 컴포넌트를 재렌더링 시킨다. 하지만 useRef 는 값이 아무리 변경되
React - useMemo
두 번째로 알아 볼 React hook은 바로 useMemo이다. useCallback과 같이 사용되기도 하는 이 hook에 대해서 알아보도록 하자! useMemo useMemo 리렌더링
