react

1. 개요React는 최적화를 위한 기능들을 내장하고 있다. 그중 하나가 VirtualDOM이다.VirtualDOM은 무엇이고 어떻게 작동할까? 또 React는 왜 VirtualDOM을 사용할까?이번 글에서는 VirtualDOM과 동작 방식에 대해 알아보자! 2. DOM이란?화면이 렌더링될 때 아래의 순서로 렌더링된다.서버로부터 html요소를 받아온다.html을 위에서부터 파싱하며 DOM트리 구조를 구성한다.css를 만난 경우 CSSOM트리 구조를 구성한다.DOM트리와 CSSOM트리를 결합해 Render트리를 생성한다.Reflow, Repaint과정을 거쳐 화면을 렌더링한다., 같은 태그들은 Javascript가 직접 이용할 수 없기 때문에 객체로 변환되는데, 이것이 DOM(Document Object..

1. 개요React로 프론트엔드 개발을 하다보면 Array타입의 데이터를 Javascript의 .map()함수로 출력해야할 때가 있다.이 때 컴포넌트에는 key를 지정해줘야 하고, 아래처럼 index를 이용하는 경우가 있는데 이는 좋은 방법이 아니다.const dataArr = [ {id : 0, data : "A"}, {id : 1, data : "B"}, {id : 2, data : "C"}, ...]{ dataArr.map((data, idx) => ... )}왜 이것이 좋지 않은 방법인지 알아보자! 2. key의 역할React는 효율적인 렌더링, 업데이트를 위해 VirtualDOM을 이용한다.간단하게 설명하면, 실제 DOM을 변경하기 전, 새로운 VirtualD..

최초 작성일 : 2024.09.10최종 수정일 : 2024.09.10 1. 개요웹 또는 앱을 개발하고 운영하다보면 점점 최적화가 필요해진다. 이 때 자주 사용하는 메모이제이션(memoization)인 useCallback, useMemo hook과 고차 컴포넌트 React.memo에 대해 정리해 보았다. 2. 3줄 요약바쁜 분들을 위한 3줄 요약useCallback : 함수를 메모이제이션 해야할 때useMemo : 값을 메모이제이션 해야할 때React.memo : 컴포넌트를 메모이제이션 해야할 때 3. 메모이제이션?메모이제이션은 이전에 계산한 결과를 캐싱해두고 동일한 입력이 주어졌을 때 캐싱된 값을 반환하는것을 말한다.어떤 결과를 얻기 위해 계산 과정을 거치는데 만약 이런 결과가 무겁고 오래 걸리는 연산..