# useMemo

158개의 포스트

개념 - useMemo

특정 값(value)를 재사용하고자 할 때 사용하는 Hook이다.이미 계산해 본 연산 결과를 기억해두었다가 동일한 계산을 시키면 다시 연산하지 않고 기억해두었던 데이터를 반환 시키게 하는 방법이다마치 시험을 볼 때 이미 풀어본 문제는 다시 풀어보지 않아도 답을 알고 있

3일 전
·
0개의 댓글
·

Unit4 회고

[React]심화 🔆 Virtual DOM Virtual DOM > Virtual DOM이 나오게 된 배경🤔 실제 DOM은 스크립팅 언어가 접근 및 탐색하는 속도가 빨라 탐색 후 변경 및 업데이트하는 속도는 역시 빠르다. 하지만 JavaScript로 조작하는 DOM

4일 전
·
0개의 댓글
·
post-thumbnail

[TIL] useMemo와 useCallback

리액트 앱의 최적화를 위한 useMemo와 useCallback에 대한 짧은 정리

5일 전
·
0개의 댓글
·

렌더링 최적화, useCallback과 useMemo

useMemo는 특정 값(value)를 재사용하고자 할 때 사용하는 hook이다.해당 컴포넌트는 props로 넘어온 value 값을 calculator라는 함수에 인자로 넘겨서 result 값을 구한 후, <div> 엘리먼트로 출력하고 있습니다.만약 여기서 cal

2022년 11월 25일
·
0개의 댓글
·
post-thumbnail

React 심화

DOM은 Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체 모델을 의미DOM은 브라우저가 트리 구조로 만든 객체 모델트리는 “데이터 저장"의 의미보다는 “저장된 데이터를 더 효과적으로 탐색”하기 위해 사용되므로, 빠른 자료 탐색 성능이 장

2022년 11월 25일
·
0개의 댓글
·
post-thumbnail

React Hook(useMemo, useCallback, useReducer)란?

useMemo, useCallback란? memoization의 약자 언제 사용할까 ? 개발 중 react가 함수형 컴포넌트를 다루기 때문에 렌더링 될 때 항상 필요없는 함수까지도 재호출되는 경우를 많이들 봤을 것이다. 이건 지금 필요없는데 렌더

2022년 11월 23일
·
0개의 댓글
·

React Hooks

React Hooks Hooks는 리액트 v16.8에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을

2022년 11월 20일
·
0개의 댓글
·
post-thumbnail

[React] useMemo란?

📋 useMemo란? useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다. useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이

2022년 11월 18일
·
0개의 댓글
·
post-thumbnail

[React]Memoization 알아보기(Profiler, useCallback, usememo) (2)

이제 여기서 Memo를 줫을때와 주지 않았을 때를 비교해보자! CommentItem.jsx 파일 Memo를 주지 않게되면 위 이미지 처럼 하나를 생성할 때 하나 만 렌더링되는게 아니라 기존에 생성되어있던 값들을 같이 렌더링한다. 하지만 memo를 넣어줌으로써 하

2022년 11월 17일
·
0개의 댓글
·
post-thumbnail

[React]Memoization 알아보기(Profiler, useCallback, usememo) (1)

메모제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술전체는 Memo Componentitem을 감싸는 comments각 아이템들을 comment

2022년 11월 17일
·
0개의 댓글
·

useMemo()

· useMemo()란 Memoized value를 리턴하는 훅.· 연산량이 높은 작업이 매번 렌더링될 때마다 반복되는 것을 피하기 위해 사용.· 렌더링이 일어나는 동안 실행되므로 렌더링이 일어나는 동안 실행돼서는 안될 작업을 useMemo()에 넣으면 안 됨.

2022년 11월 14일
·
0개의 댓글
·

React 렌더링 최적화

함수 컴포넌트는 그냥 함수이다. jsx를 반환할 뿐.함수 컴포넌트가 렌더링 된다는 것은 누군가(부모 컴포넌트)가 그 함수를 호출하여 실행되는 것이다.함수가 실행될 때 마다 내부에 선언되어 있던 표현식(변수 등)들도 매번 다시 계산된다.컴포넌트는 자신의 state가 변경

2022년 11월 14일
·
0개의 댓글
·

useCallback useMemo 언제 사용할까?!

useCallback컴포넌트가 리렌더링 될때마다 컴포넌트 내부에 있는 함수가 리렌더링 되는데, 이를 막아주기 위해 useCallback을 사용해 주면 유용하다. 즉, 불필요한 리렌더링을 막아주는 셈이다.useCallback이 하는 일함수를 메모라이징 해준다. Depen

2022년 11월 4일
·
0개의 댓글
·
post-thumbnail

React - useMemo, useCallback

메모이제이션(memoization)된 값을 반환함수형 컴포넌트 - 렌더링 -> Component함수 호출 -> 모든 내부 변수 초기화= 호출하는 함수가 무거운 함수라면, 매우 비효율적 --> useMemo가 해결useMemo - 렌더링 -> Component함수 호출

2022년 11월 4일
·
0개의 댓글
·
post-thumbnail

리액트 #6 최적화 기능

리액트 최적화기능인 useMemo, React.memo, useCallback 기능들에 대한 기록

2022년 11월 3일
·
0개의 댓글
·

[React] 리렌더링

리렌더링이 발생하는 상황 > 최초 렌더링이 끝난 이후, 컴포넌트의 State가 바뀌면 해당 컴포넌트와 그의 자식 컴포넌트는 리렌더링됩니다. 리렌더링 사이클 rerender-cycle Rerendering -> DOM update -> useLayoutEffect ->

2022년 11월 1일
·
0개의 댓글
·
post-thumbnail

useCallback과 useMemo 사용하기

Memoization 리액트 생태계에서 렌더링 퇴적화를 위해 사용되는 hook을 알아보기 앞서 useCallback과 useMemo는 메모이제이션된 콜백을 반환하고 값을 반환하기 때문에 메모이제이션(memoization)이 무엇인지 알아본다. 메모이제이션(memoiz

2022년 10월 31일
·
0개의 댓글
·

useMemo

const location = { country : isKorea ? '한국','외국',},useEffect(()=>{ console.log('useEffect 호출');},location);(17:04)(17:35)(17:55)(19:48) 위의 location

2022년 10월 21일
·
0개의 댓글
·

[React] useEffect, useMemo, useCallback

네이버 블로그에서 이전, 원글 작성일시 : 2021.07.25.03:19오늘은 hook에 대해 좀 더 자세히 알아보자.지난시간에 React Component의 Lifecycle에 대해 알아봤었다. useEffect는 어려웠다.이 마음을 눈치채셨는지, 제로초 님의 다음

2022년 10월 13일
·
0개의 댓글
·
post-thumbnail

[React] 랜더링의 모든 것

(너무나 오랜만에 돌아온 듯한 느낌이지만...) 요즘 너무나 바쁘고, velog라는 것에 대해 잊어버리며 살다가 바쁘게 살던 만큼 깨달은 것들이 너무 많고, 느낀점이 너무나도 많아서 점점 정리가 필요하다고 느낄때 쯤? 비로소 돌아오게 되었다(,,,ㅎ) 그리고 비로

2022년 10월 13일
·
0개의 댓글
·