일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- MARGIN
- 부트캠프
- CSS
- 한달후기
- 프론트엔드공부
- JavaScript
- 제로베이스
- HTML
- html/css
- 목표
- Frontend
- 제로베이스 후기
- 후기
- Border
- 프론드엔드스쿨
- PADDING
- 프론트엔드개발자
- 미션회고
- 프론트엔드vs백엔드
- 가고 싶은 회사
- 자바스크립트
- 개발공부
- 하차
- 프론트엔드
- 웹 개발
- 프론트엔드스쿨
Archives
- Today
- Total
개발자가 되어보자
[Weekly Paper] 6. Virtual DOM & React 배열 렌더링 key 본문
Virtual DOM
- UI의 이상적인 또는 "가상" 표현을 메모리에 보관하고 ReactDOM과 같은 라이브러리에 의해 "실제" DOM과 동기화되는 프로그래밍 개념이다.
- 실제 DOM과 같은 내용을 담고 있는 복사본 → js 객체 형태로 메모리 안에 저장되어 있다.
- 실제 DOM의 메모리상의 표현이며, 실제 DOM의 가벼운 사본이라고 볼 수 있다.
- 실제 DOM의 모든 element와 속성을 공유한다.
- 실제 DOM의 구조를 반영하며, 렌더링하는 데 필요한 정보만을 가지고 있다.
- 브라우저에 있는 문서에 직접적으로 접근할 수 없어서 화면에 보여지는 내용을 직접 수정할 수 없다.
- 렌더링 성능을 향상시키기 위해 가상 DOM을 사용하여 실제 DOM과의 차이를 최소화한다.
- 가상 DOM은 실제 DOM과 비교하여 변경된 부분을 찾아내고, 변경이 발생한 부분만 실제 DOM에 패치하는 역할을 한다. 이를 통해 실제 DOM에 대한 불필요한 연산을 줄이고 렌더링 성능을 개선할 수 있다.
- 변경이 발생한 부분을 적용시킬 때 변경이 발생한 모든 요소들을 집단화시켜 한번에 실제 DOM에 적용한다.
React 배열 렌더링 key
- key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는 역할이다.
- 요소에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.
- key는 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이 가장 좋은 방법이다.(대부분의 경우 데이터의 id를 key로 사용한다)
- 렌더링 한 항목에 대해서 id가 없다면 최후의 수단으로 배열의 인덱스를 key로 사용할 수도 있지만 권장하지 않는다.(항목의 순서가 바뀔 수 있는 경우 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있다)
- key는 반드시 변하지 않고, 예상 가능하며, 유일해야 한다.
- key는 형제 노드에서만 고유하면 된다. 전역에서 고유할 필요는 없고 해당 배열안에서만 고유성을 유지하면 된다.
- 변하는 key를 사용하면 많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 나빠지거나 자식 컴포넌트의 state가 유실될 수 있다.
'Codeit > Weekly Paper' 카테고리의 다른 글
[Weekly Paper] 5. HTTP 메소드 & 코드 출력 예상 (0) | 2023.11.19 |
---|---|
[Weekly Paper] 4. Javscript 변수 & 브라우저 동작 원리 (0) | 2023.11.12 |
[Weekly Paper] 3. 동등 연산자(==) VS 일치 연산자(===) & 복사 (0) | 2023.11.05 |
[Weekly Paper] 2. Git branch merge & Git Flow (0) | 2023.10.29 |
[Weekly Paper] 1. Cascading & Position (0) | 2023.10.22 |
Comments