하리하링웹

React에서 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 re-render되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이번 글에서는 잘 응용하면 대부분의 경우 발생할 수 있는 re-rendering을 방지하는 방법에 대해 작성할 예정이다. React의 memo에 대해 작성할 예정이다. 먼저 아래에 간단한 예시가 있다. import { useState } from 'react'; import { Button } from '@/components/ui'; function LargeComponent() ..

React에서 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 re-render되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이번 글에서는 3.컴포넌트의 Props값이 변경되었을 때 발생할 수 있는 re-rendering을 방지하는 방법에 대해 작성할 예정이다. import { Button } from '@/components/ui'; import { memo, useCallback, useState } from 'react'; function ButtonComponent({ onClick }: { onC..

React에서 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 re-render되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이번 글에서는 2.부모 컴포넌트가 re-render되었을 때 발생할 수 있는 re-rendering을 방지하는 방법에 대해 작성할 예정이다. 간단하게 예시 코드를 보자 import { useState } from 'react'; function BigComponent() { console.log('revaluating'); return complex calculations ; } e..

React에서 크게 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 Rerender되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이 글에선 1.함수 내의 State가 변경되었을 때 의 경우 re-rendering을 방지하는 디자인 패턴에 대해 설명할 예정이다. 먼저 React의 re-render 과정을 간단하게 나누어 설명을 해보자면 re-evaluation 과정을 거친다. virtual dom을 생성한다. 비교 후 Commit하여 페이지에 반영한다 정도로 나누어져 있다. 자세하게 설명하면 뭐 함수를 호출..

위 사진에서 UI를 담당하는 Notification Component가 아니라 이를 구현하기 위한 Provider를 만들 예정이다. 필요한 기능들은 아래와 같다. 1. 토스트기능 2. Auto dismiss on/off 기능 3. dismiss ms 설정 기능 4. success,alert,info 3가지 종류 라이브러리는 안쓸 수 있으면 최대한 안쓰기로 마음먹었기에 별다른 토스트 라이브러리를 사용하지 않고 직접 구현하였다. 먼저 기본적으로 필요한 Type들을 정의해준다. 자동으로 Notification가 닫히는 시간을 5초로 정의하였으며 Auto Dismiss유무는 True로 정의하였다. 이 값은 사용자가 Option값을 넣지 않았을때의 기본값이다. 이후 Notification을 Provide하기 위한..