# useMemo
220515 TIL
TIL DAY 183 오늘 배운 일 ✔️ React Hooks > 유튜브 별코딩님의 강의를 보고 작성한 나의 일지 useMemo 컴포넌트 성능을 최적화하는 hook useMemo -> Memo = Memoization (메모이제이션) 동일한 값을 리턴하는
Memoization
https://ko.wikipedia.org/wiki/%EB%A9%94%EB%AA%A8%EC%9D%B4%EC%A0%9C%EC%9D%B4%EC%85%98메모이제이션 memoization기억되어야 할 것이라는 뜻의 라틴어에서 파생된 단어로, 컴퓨터 프로그램이 동일
React 최적화 Hook(React.memo, useCallback, useMemo)
React 최적화 관련 Hooks, React.memo, useCallback, useMemo에 대한 정리 및 고찰
32일차) 코드캠프에서는 실무 작성 코드 위주가 1순위랍니다 / memoization/메모이제이션/usememo/useCallback/reflow/repaint
실무 작성 코드 위주로 배우자, 자꾸 새로 만들지 말고 , 메모해 놓는거 어때 ? \-컴포넌트를 만들어놓고 봐보자 State는 변경되면서 컴포넌트가 바뀌면서 페이지가 리렌더링이 된다문제는 countLet이 State누를때마다 같이 초기화 됨(화면에도 안나타나고)\-특정
useCallback과 useMemo 사용하기
랜더링의 최적화를 위해서 사용되는 useCallback은 이미 랜더링되었던 동일한 함수라면, 다시 함수가 선언되지 않는다.
리액트 useMemo
이 포스트에서 다룰 것 컴포넌트를 최적화하기 위해 사용하는 대표적인 훅 , 중에서, 를 알아볼 것이다. 를 사용하는 방법과, 사용하면 무엇이 좋은지를 알아본다. 배경 지식 Memoization(메모이제이션) 라는 이름에서 알 수 있듯이 는 말 그대로 메모를 하는 방
useMemo 사용법
다음과 같이 사용자를 등록하고 전체 사용자 정보와 전체 사용자 수를 나타내는 코드가 있다. App.js 해당 화면에서 이름과 기분을 입력하면 inputs의 State가 변경되면서 App 컴포넌트가 Re-Rendering된다. const numberOfUser =
useCallback vs useMemo(feat. React.memo)
프로젝트를 보다가 useCallback, useMemo, React.memo를 봤는데 정확한 개념을 이해하지 못해서 찾아보기로 했는데 먼저 메모이제이션(memoization)에 대해 알아야 한다memoization이란 기존에 수행한 연산의 결과 값을 어딘가에 저장해두고
[React] Context에 useMemo 사용하여 불필요한 리렌더링 방지하기
Context API는 전역으로 데이터를 공유할 수 있도록 고안된 방법이다. 사용자 정보나, 테마, 언어 등 전역적인 데이터를 관리하기에 용이하다. 데이터를 가지고 있는 상위 컴포넌트에서 Context가 전송하는 value 데이터는 객체 형태이다. 따라서 객체에서 하나
리액트를 다루는 기술 : Hooks [useReducer,useMemo,useCallback]
useReducer에서 사용하는 액션 객체는 반드시 type을 지니고 있을 필요는 없다. 심지어 객체가 아니라 문자열이나 숫자여도 상관없다. 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 한다.
👨🏻💻 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] Hooks - useMemo
이번에 소개할 Hook인 useMemo는 컴포넌트 내부 중에서도 연산에 대해서 최적화를 하는 Hook입니다. Memo라는 것은 우리가 간단하게 남기는 쪽지가 아니고, 메모이제이션(memoization)이라는 용어에서 왔습니다. 이 메모이제이션은 컴퓨터공학 용어로 연산을
useMemo, useCallback
리액트엔 참 많은 훅들이 많다. 제목과 같이 useMemo와 useCallback은 없어도 동작은 되지만, 소스 최적화를 위해서 필요한 기능들이다. 사전 지식: 함수형 컴포넌트는 그냥 함수다. 함수형 컴포넌트는 단지 jsx를 반환하는 함수다. 함수가 실행될 때마다