# React.memo
[Udemy] React 기본 - 일기장 만들기(12) 최적화 완성
React.memo, useEffect, useCallback을 활용해 일기 목록 렌더링을 최적화
[Udemy] React 기본 - 일기장 만들기(10) 최적화2 (컴포넌트 재사용) : React.memo
연산 낭비를 막는 React.memo로 컴포넌트 재사용
React 최적화 Hook(React.memo, useCallback, useMemo)
React 최적화 관련 Hooks, React.memo, useCallback, useMemo에 대한 정리 및 고찰
useCallback vs useMemo(feat. React.memo)
프로젝트를 보다가 useCallback, useMemo, React.memo를 봤는데 정확한 개념을 이해하지 못해서 찾아보기로 했는데 먼저 메모이제이션(memoization)에 대해 알아야 한다memoization이란 기존에 수행한 연산의 결과 값을 어딘가에 저장해두고
자식 컴포넌트에 props를 내려 줄 때에는 useCallback + useMemo를 사용하자
https://ko.reactjs.org/docs/hooks-reference.htmlhttps://ui.toast.com/weekly-pick/ko_20190731
👨🏻💻 Memoizing Series (useCallback,useMemo,React.memo)
평소에 공부는 해놨지만 큰 프로젝트를 하지않아 렌더링 최적화에 크게 신경쓰지 않았다. 지금 하는 블로그 프로젝트도 다른 대형 프로젝트에 비하면 크게 렌더링에 악영향을 주진 않지만 state가 복잡해지고 Component수도 많아진만큼 최적화를 해주는 것은 앞으로의 좋은
React Hook - useMemo, React.memo, useCallback
- 연산 최적화 할 때 사용 Memoization : 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억(캐싱) 해 두었던 데이터를 반환 시키게 하는 방법 useMemo 일반 함수로 작업시 첫 로드시 2번 실행됨 Ap
React.memo, useMemo, useCallback 역할 및 차이점
React는 컴포넌트를 렌더링 한 뒤, 이전 렌더된 결과와 비교하여 Dom 업데이트를 결정한다. 이 때 재렌더가 필요없는 컴포넌트의 렌더를 방지하여 이 업데이트 속도를 높일 수 있는 방법들이 있는데 정확한 역할과 차이점을 구분하기 위해 정리해 보고자 한다.썸네일Reac
[React]속성이 변하는 component만 랜더링 하게 하기 -React.memo()
react의 놀라운 기능 React.memo()가 있다.react의 놀라운 장점 중 하나는 component가 변할때 자동으로 새로고침(랜더링)해준다는 것인데 이 장점이 때로는 불필요할 때가 있다.지금 만들고 있는 프로젝트를 예로 들어보자.Board에 있는 메모(Car
📈 React.memo
리액트 프로젝트를 만들면서 여러 컴포넌트를 다루게 된다.컴포넌트는 여러 가지 상황에 따라 리렌더링이 발생할 수 있는데 이는 가끔 불필요한 리렌더링을 발생시키는 경우가 있다.리렌더링이 발생하는 경우는 언제인가?리렌더링이 발생하는 경우는 크게 3가지 경우가 있다.1\. p
#15.TIL | Component 성능 최적화(React.memo)
데이터의 양이 많아지면 렌더링하는데 시간이 많이 걸리고 애플리케이션이 느려지게 된다. 이러한 경우에는 컴포넌트 성능 최적화를 통해 렌더링 시간을 단축 시킬 수 있다.자신이 전달받은 props가 변경될 때자신의 state가 바뀔 때부모 컴포넌트가 리렌더링될 때forceU
React 최적화 방법(React.memo, useCallback)
함수형 컴포넌트를 export할 때, React.memo로 wrapping하여 최적화한다.React.memo는 인자로 받은 컴포넌트에 어떤 props가 들어가는지 확인한다.그리고 모든 props 값을 확인하고 그 값을 props가 이전에 받은 값과 비교하여, props
[React] React.memo로 Rendering 최적화2 (feat.예제1,2)
💡React.memo란? React.memo(re-rendering이 일어나지않았으면 하는 컴포넌트)를 입력하면 props가 변화하지않으면 반환되지않는 고차 컴포넌트(강화된 컴포넌트)를 돌려준다. 물론 자기자신의 state가 바뀌면 re-rendering이 일어난다
[TIL] 0101
상태, 속성 값을 이용해 값을 계산할 때, 상태, 속성 값이 바뀌지 않았다면 재렌더링 시에도 기존 값을 쓰게 하는 것기존 값을 쓰는 경우부모 컴포넌트가 재렌더링 했을 시계산에 쓰이지 않은 다른 상태, 속성 값이 바뀌었을 시함수 선언이 재렌더링 될 때마다가 아니고, 필요
[React] React.memo 알아보기
HOC(Higher Order Component)이며 다른 렌더링 최적화 Hook(useCallback, useMemo)들과 다르게 컴포넌트 자체의 렌더링을 최적화할 때 사용합니다. 👍컴포넌트의 Prop에 따라서 render을 조절하게 되는데기존에 들어왔던 Prop와
React.memo, useMemo, useCallback 사용하기
렌더링 최적화 수단으로 많이 사용되는 3가지가 있다.3가지에 대해서 알아보자.React는 이전에 rendering된 결과와 비교해서 DOM Update를 결정한다. 만약 이전과 다르면 DOM을 업데이트할 것이다.이전 렌더링 결과와 현재 렌더링 결과를 비교하는 과정은 빠