DOM의 의미와 특징
-DOM ( The Document Object Model, 문서 객체 모델)은 HTML, XML(Extensible Markup Language) 문서의 프로그래밍 interface이다.
-nodes와 objects로 문서를 표현한다.
-웹페이지의 객체 지향 표현이며, 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
-DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹페이지 또는 XML 페이지 및 요소들과 관련된 모델이나
개념들에 대한 정보를 갖지 못하게 된다.
-DOM의 구현은 어떠한 언어에서도 가능하다.
재조정:
UI가 표현된 객체를 메모리에 저장하고, React DOM과 같은 라이브러리에 의해 '실제'DOM과 동기화 하는 과정
1) UI가 변경되면 전체 UI를 Virtual DOM으로 렌더링한다.
2) 현재 Virtual DOM과 이전 Virtual DOM을 비교해 차이를 계산한다.
3) 변경된 부분을 실제 DOM에 반영한다.
마크업 언어:
태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지, 태그는 원래 텍스트와는 별도로 원고의 교정부호와
주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를
마크업 언어라 한다.
XML:
특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어
BOM:
브라우저 객체 모델(Browser Object Model, BOM)은 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타낸다.
렌더링이란?
-리액트에서 렌더링이란 컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미한다.
리렌더링의 조건을 정확히 이해해야 하는 이유?
-당장에 이해할 필요가 있는 것은 아니나, 성능저하 이슈를 경험하기 시작하거나, 메모이제이션(Memoization, useCallback/useMemo/memo)을 활용하여 리렌더링을
조금이라도 줄이기 위한 고민을 하고 있다면 실제로 효과가 없는 최적화에 시간을 낭비하지 않을 수 있다.
*메모이제이션: 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여
프로그램 실행 속도를 빠르게 하는 기술이다.
React에서 리렌더링되는 조건
-props나 state가 변경되었을 때, 부모 컴포넌트가 리렌더링되었을 때, 중앙 상태값(Context value 혹은 redux store)변경 시
형제 컴포넌트들끼리 서로 리렌더링에 영향을 주는가
-parent 밑에 child1, child2, child3이 있다고 했을 때 child1이 리렌더링된다고 child2나 child3이 리렌더링되지는 않는다.
child1, 2, 3이 리렌더링되는지의 여부는 오직 부모인 parent 컴포넌트의 리렌더링에만 의존한다.
props, children으로 받은 컴포넌트는 자식 컴포넌트인가
-'JSX 안에서 사용된 컴포넌트'란 형태로 사용된 컴포넌트로 props, children으로 받은 컴포넌트는 자식 컴포넌트가 아니다.
리렌더링 과정 요약
- 위의 조건을 통해 Component 리렌더링
- 구현부 실행 = props 취득, hook 실행, 내부 변수 및 함수 재생성
- return 실행, 렌더링 시작
- 렌더 단계(Render Phase): 새로운 가상 DOM 생성 후 이전 가상 DOM과 비교해 달라진 부분을 탐색하고 실제 DOM에 반영할 부분을 결정
- 커밋 단계(Commit Phase): 달라진 부분만 실제 DOM에 반영
- useLayoutEffect: 브라우저가 화면에 Paint하기 전에 useLayoutEffect에 등록해둔 effect(부수 효과 함수)가 동기적으로 실행되며, 이 때 state, redux store등의 변경이 있다면
한 번 더 리렌더링- Paint: 브라우저가 실제 DOM을 화면에 그림. didUpdate 완료.
- useEffect: update되어 화면에 그려진 직후, useEffect에 등록해둔 effect(부수 효과 함수)가 비동기로 실행
이번 주차에서 배운 내용 중 내가 생각하는 중요한 키워드에 대해 조사하였다.
