# memoization
[React.js]focus된 input element에서 텍스트 뒤로 커서 보내기
서론 BubblePop 프로젝트 중 사용자 키보드 입력을 화면에 말풍선 안에 보여줘야 합니다. 그런데 'abcdeg'를 입력하면 한글자씩 입력할 때마다 커서가 텍스트 앞으로 가면서 'gedcba'가 입력되게 됩니다. 의심이 가는 코드 부분입니다. 아무래도 컴포넌트에
Caching과 setrecursionlimit() 함수
일반적으로 캐싱(caching) 은 실행하는데 오래 걸리는 연산을 미리 계산해 놓고 저장하여, 재사용하는 기법을 의미합니다.
Today I Learned 2023.03.03. [React 숙련주차 1]
styled component 패키지에 대해 알아가며, 특히 리액트에서의 여러가지 훅에 대해서 공부했다. 불필요한 렌더링을 막아 최적화를 하기 위해서는 상황에 맞춰서 알맞는 훅을 적재적소에 사용하는게 좋을 것이다.
[LeetCode] 1137. N-th Tribonacci Number
한동안 알고리즘을 안풀다가 다시 풀어본다.https://leetcode.com/problems/n-th-tribonacci-number/description/재귀함수를 이용하여 풀 수도 있다.ahmedengu의 풀이https://leetcode.com
리액트 "Memoization"
리액트는 함수형 컴포넌트를 기반으로 사용자에게 빠른 UI를 제공을 목적으로 한다.리액트 특정상 리렌더링이 빈번히 일어나는데리렌
[알고리즘] - 피보나치 수열 ( 근데 이제 for, 배열, 재귀를 곁들인..)
궁극적인 목표는 memoization을 기록하기 위한 글이다. 피보나치 수열 문제를 for, 배열, 재귀를 통해 풀어보고자 한다.
Memoization
state를 쓰면 리렌더링이 되기 때문에 위에서 똑같은게 다시 만들어진다. 이렇게 state할때마다 재렌더링 되는건 불필요하다. Memoization이란? 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수
[React] 리렌더를 멈춰줘! Memoization, 속도를 더 빠르게! Preload/Prefetch
Memoization 모든 컴포넌트에 메모를 거는 것은 좋지 않은 방법이다! useMemo나 useCallback에 의존성배열이 너무 길어지면 오히려 유지보수를 깨뜨릴 수 있다! 브라우저에 어떻게 그림이 그려질까? -Critical-Rendering-Path-
31day - Memoization
let 방식으로 카운트를 올리면 리렌더링이 되지 않기 때문에 카운트: 0의 숫자는 변하지 않는다. Document.getElementById로 값을 넣어주어야 한다.state 방식으로 카운트를 올리면 자동으로 리렌더링되어 브라우저에 카운트가 올라간다. 하지만 나는 부모
[React]Memoization 알아보기(Profiler, useCallback, usememo) (2)
이제 여기서 Memo를 줫을때와 주지 않았을 때를 비교해보자! CommentItem.jsx 파일 Memo를 주지 않게되면 위 이미지 처럼 하나를 생성할 때 하나 만 렌더링되는게 아니라 기존에 생성되어있던 값들을 같이 렌더링한다. 하지만 memo를 넣어줌으로써 하
[React]Memoization 알아보기(Profiler, useCallback, usememo) (1)
메모제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술전체는 Memo Componentitem을 감싸는 comments각 아이템들을 comment
React 렌더링 최적화
함수 컴포넌트는 그냥 함수이다. jsx를 반환할 뿐.함수 컴포넌트가 렌더링 된다는 것은 누군가(부모 컴포넌트)가 그 함수를 호출하여 실행되는 것이다.함수가 실행될 때 마다 내부에 선언되어 있던 표현식(변수 등)들도 매번 다시 계산된다.컴포넌트는 자신의 state가 변경
useCallback과 useMemo 사용하기
Memoization 리액트 생태계에서 렌더링 퇴적화를 위해 사용되는 hook을 알아보기 앞서 useCallback과 useMemo는 메모이제이션된 콜백을 반환하고 값을 반환하기 때문에 메모이제이션(memoization)이 무엇인지 알아본다. 메모이제이션(memoiz
리액트의 리렌더링 조건을 더 쉽게 이해해보기
부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링 되는데요. 여기서 부모/자식 관계는 DOM 트리에서 부모/자식과는 다를 수 있습니다. 렌더링 관계 트리를 통해 리렌더링되는 조건을 확인해보고, 메모이제이션을 통한 최적화가 효과가 있는지 확인해보도록 해요.
프론트엔드 개발자가 되기위한 여정 -31
밸! 하!밸로그 여러분 안녕하세요 오늘부터 성능최적화에 대해서 알아보겠습니다 성능최적화 방법에는 여러가지가 있는데요 오늘은 그중에서 memoization,promise all과 브라우저 렌더링(preload/prefetch)에 대해서 알아보겠습니다!먼저 memoizat