react

Frontend/React.js

[React 성능 개선] 2. useMemo()

[React 성능 개선] 1. 디바운싱 해당 포스트는 리액트 문법에 대한 설명은 대부분 생략되어 있습니다. 기본적으로 리액트는 다른 프런트앤드 언어와 다른 방식으로 랜더링을 진행합니다. 상태 변경이 발생하면 기존의 UI를 모 pventi.tistory.com 위 글에서도 설명했듯 리액트는 상태 정보에 변경이 발생하면 전체 컴포넌트를 리랜더링 합니다. 그렇기에 리액트 자체에서 해당 문제를 해결할 함수 몇 가지를 제공하고 있습니다. 이번 포스트에서 알아볼 함수는 useMemo()입니다. 메모이제이션 코딩 테스트를 준비해 본 사람이라면 메모이제이션이라는 단어를 들어보셨을 겁니다. 들어보지 못한 분들을 위해 간단하게 설명드리자면 메모리에 이전에 계산한 값을 저장해 반복적인 계산 작업을 최소화하는 것을 말합니다...

Frontend/React.js

[React 성능 개선] 1. 디바운싱

해당 포스트는 리액트 문법에 대한 설명은 대부분 생략되어 있습니다. 기본적으로 리액트는 다른 프런트앤드 언어와 다른 방식으로 랜더링을 진행합니다. 상태 변경이 발생하면 기존의 UI를 모두 지우고 리랜더링을 진행하는 방식입니다. 해당 방식은 Virtual DOM를 이용하기때문에 전체 리랜더링을 진행하더라도 성능면에서도 뒤떨어지지 않는 방식이므로 충분히 프런트앤드를 대표할만한 언어라 생각합니다. 실제로 프로그램을 제작하다 보면 전체 리랜더링 방식은 성능 저하가 발생하는 경우가 많습니다. 그렇기에 개발할 때 해당 부분을 신경 쓰며 개발을 진행하셔야 합니다. 이번 장에서는 실제로 저자가 아래 프로젝트를 진행하면서 개선한 성능들 중 하나인 "Input태그로 값을 받았 경우"에 대해 설명하겠습니다. GitHub -..

P.Venti
'react' 태그의 글 목록