React

React

[React] Virtual DOM

🧐 React Virtual DOM 이란?! React같은 SPA 라이브러리에서는 효율적인 렌더링을 하기 위해 실제 DOM오브젝트의 복사본 혹은 추상화를 하여 diffing 알고리즘이나 reconciliation 프로세스를 통해 실제 DOM과 동기화해서 실제 DOM에서 변경된 부분만 감지해서 렌더링을 수행하기 위해서 리액트가 생성하는 가상 DOM 오브젝트를 Virtual DOM 이라고 한다. reconciliation 이 어떤식으로 동작하는지는 별도의 글을 써서 알아보기로 하고 지금은 Virtual DOM 에 집중해보자 1. 왜 React는 Virtual DOM을 쓰지? 🤔 왜 리액트는 Virtual DOM 을 쓰는지 이해하기 위해선 브라우저가 실제 그림을 그리는 렌더링 과정을 이해할 필요가 있다. 1...

React

[React] useMemo

useMemo react의 기본 동작원리는 상태(state)가 변경될때마다 re렌더링을 하는것이다 그렇다보니 현재 상태가 변경 될때 컴포넌트안에 포함된 기능, 함수들과 무관한 상태(state)의 변경 일때도 re렌더링이 일어나 함수의 불필요한 재실행이 일어나게 된다 ※ 예를 들어 const getDiaryAnalysis = () => { if (data.length === 0) { return { goodcount: 0, badCount: 0, goodRatio: 0 }; } console.log("일기 분석 시작"); const goodCount = data.filter((it) => it.emotion >= 3).length; const badCount = data.length - goodCount;..

프론트로그
'React' 카테고리의 글 목록