1) 리액트의 특징
(1) 컴포넌트(Component)
재사용이 가능한 각각의 작고 독립적인 모듈. 마치 레고 블럭…
이미 만들어진 컴포넌트들을 조합하여 화면을 효율적으로 구성하는 것이 리액트의 특징.
🌟 컴포넌트의 구성요소
- 프로퍼티(Props)
- state
- 컨텍스트(Context)
(2) 가상돔(Virtual DOM)
✍🏻 브라우저에서 화면을 렌더링하는 과정
서버로부터 받는 파일을 파싱하여 DOM Tree와 CSSOM Tree를 만들고 결합 : 렌더트리(Render Tree) 생성.
생성한 Render Tree로 Layout을 계산하고 만든 후, 이 요소들을 실제로 화면을 그리는 Paint를 한다.
DOM + CSSOM → Render Tree
- DOM(Document Object Model) Tree
HTML 파일을 파싱하여 구조화하여 표현한 것.
- CSSOM(CSS Object Model) Tree
CSS 파일을 DOM처럼 파싱하고 구조화하여 만든 것.
DOM은 아주 작은 변경사항이 있더라도 항상 리렌더링을 하고 이때 문제점 발생
= 화면이 커지면 커질수록 화면을 그리는 시간이 길어지는, 즉 속도가 느려지는 것.
따라서 가상돔(Virtual DOM)을 사용.
🌟 리액트가 가상돔(Virtual DOM)을 반영하는 절차
① 변경사항 발생 → 전체 UI를 Virtual DOM에 리렌더링.
② 이전 Virtual DOM과 현재를 비교 : 가상돔끼리 비교
③ 변경된 부분만 실제 DOM에 업데이트
즉, 간단히 요약하자면:
기존 : 화면의 일부가 수정되면 화면 전체를 업데이트.
가상 DOM 도입 : 이전 UI에서 변경된 부분만 반영하여 업데이트
답글 남기기