Q. 가상돔(Virtual DOM)이란?
가상 DOM은 실제 DOM에서 처리하는 방식이 아닌 Virtual DOM과 메모리에서 미리 처리하고 저장한 후 실제 DOM과 동기화하는 프로그래밍 개념이다. 해당 DOM을 컴포넌트 단위로 쪼개어 HTML 컴포넌트 조립품 처럼 다루는 개념이다.
가상돔을 사용하면 실제돔에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다.
(실제 DOM의 사본)
DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 -> 성능 향상
가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고, DOM에 변경이 있을 경우 해당 변경을 반영함.
리액트가 가상DOM을 반영하는 절차
1) 데이터가 업데이트 되면, 전체 UI를 가상DOM에 리렌더링함.
2) 이전 가상DOM에 있던 내용과 현재의 내용을 비교함 (가상DOM끼리 비교)
3) 바뀐 부분만 실제 DOM에 적용이 됨 (컴포넌트가 업데이트 될 떄, 레이아웃 계산이 한번만 이루어짐)
결론
DOM 사용시 작은 규모의 레이아웃이 여러번 발생 -> 가상 DOM 사용으로 큰 규모의 레이아웃이 한 번 발생
리액트는 위와 같은 얕은 비교와 일괄 돔 업데이트 방식을 이용해 성능향상을 꽤한 것
하지만 개발자의 코드 수준에 따라 가상DOM이 더 낮은 성능을 발휘 할 수도 있다~
DOM 도 좀 보고가자
DOM에 대해서 알아보자. DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게 브라우저가 트리구조로 만든 문서 객체 모델을 의미함.
여기서 문서 객체란 html, head(title, meta 등), body(h1, p, ul 등)과 같은 태그처럼 JS가 이용할 수 있는 객체를 의미함.
그니까 DOM은 브라우저가 HTML 과 스크립팅 언어인 JS를 서로 이어주기 위해 사용한다고 보면된다.
JS는 Document 라는 전역 객체를 통해 html 에 접근해 태그들을 조종한다.
(ex. document.getElementById() document.getElementByClass() 등)
=>가상 DOM이 나온 이유
실제 예시를 통해 DOM의 문제점을 보자,
document.getElementById('title').innerValue = 'updated value' ;이 코드가 실행되면 크게 5가지 과정이 일어난다.
1) 브라우저는 HTML을 구문 분석해 title ID를 가진 노드를 찾는다
2) 이 요소의 자식 요소를 제거한다
3) 'updated value' 로 요소(DOM)를 업데이트 한다.
4) 부모 및 자식 노드에 대한 CSS를 다시 계산한다.
5) 마지막으로 브라우저 디스플레이에 페인팅된다.
실제 변경 데이터 뿐 아니라 더 많은 작업이 일어나고 CSS를 다시 계산하고 레이아웃을 변경할때 복잡한 알고리즘이 필요하고 이는 성능에 영향을 미치게된다.
이처럼 화면의 변경사항을 DOM을 직접 조작해 브라우저에 반영하면 DOM 트리가 수정될 때마다 렌더 트리가 계속 실시간으로 갱신된다. 화면에 10개의 수정사항이 발생하면 수정할 때 마다 새로운 랜더 트리가 10번 수정되면서 새롭게 만들어지는 비효율이 일어남.
Q. React의 함수형 컴포넌트란?
React의 컴포넌트는 크게 class형 과 함수형으로 나뉘는데 간단하게 정의하면,
함수형 컴포넌트
- function 으로 정의하고 return 문에 jsx 코드를 반환
function 함수형컴포넌트(props){
return(
<div>
`함수형 컴포넌트 와꾸
당연히 화살표로 해도됨
=> const 함수형컴포넌트 = (props) => {
return(
<div>이거랑 동일</div>
)}`
</div>
)
}
클래스형 컴포넌트
- class로 정의하고 render() 함수에서 jsx 코드를 반환
class 클래스컴포넌트 extends React.Component {
render(){
return (
<div>클래스형 컴포넌트 와꾸</div>
)
}}
react hooks등장 전에는 클래스형 컴포넌트에서'만' state(상태)를 사용할 수 있고 각종 라이프사이클 및 메서드를 이용하여 컴포넌트가 마운트 언마운트 될 때 추가 작업을 하게 조작 할 수 있었고 함수형 컴포넌트는 간단한 componenet 밖에 못 만들었음.
*아래는 hooks에 관한 공식 문서 설명 중 일부
Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (하지만 이미 짜놓은 컴포넌트를 모조리 재작성하는 것은 권장하지 않습니다. 대신 새로 작성하는 컴포넌트부터는 Hook을 이용하시면 됩니다.)
현재는 React 측에서도 함수형을 권장하고 있지만 class형 또한 계속 지원하니 기존의 것을 수정 할 필요는 없다
또한, 커뮤니티가 매~우 큰 React 생태계에서 기존의 class형 컴포넌트가 유지보수 되고 있고 docs 또한 아직class형이 많다. 나같은 react 병아리는 함수형을 배우되 class형은 개념정도만 알아두면 될듯~ 뭐 회사에서 쓰면 추가로 배워야지모..
요 며칠 집 근처에 스터디카페를 다니고 있는데 썩 분위기가 좋아서 한달 결재를했다. 독서실도 카페도 나름대로 여기저기 많이 다녀서 별 기대 안했는데 생각보다 좋아서 잘 공부하는중.
며칠 앉아서 계속 미뤄뒀던 마지막 프로젝트 리뉴얼도 하고 (아니~ 같이 작업한 프론트 분이 여기저기 레거시 코드 작성해서 유지보수 하느라 고생좀 함.. 잘 하시는 분이었는데 마지막에 힘이 좀 빠지셨었나봄ㅠ) 면접준비(?) 핑계로 이것저것 강의듣고 공부하고 있음. 트러블 슈팅도 다시 작성해야되는데 카페에서 노트북으로만 하려니 진도가 안나가서 그냥저냥 공부만 하고있다~
특새도 꼬박꼬박 가서 벌써 내일이 마지막이고 운동도 다시 잘 하고있어서 썩어가던 몸이 금방 회복했다 아~주 긍정적! 하 근데, 이력서 좀 수정하고 슬슬 제출해야 되는데 하기 댕싫네^ㅗ^
'WIL & TIL' 카테고리의 다른 글
| 22/11월 TIL(Q. Scope란?) (0) | 2022.11.14 |
|---|---|
| 22/11월 TIL(Q. Execute Context란?) (0) | 2022.11.11 |
| 22/11월 TIL(Q. '변수 생성 3단계' & '호이스팅'이란?) (2) | 2022.11.08 |
| 22/10월 TIL (0) | 2022.10.30 |
| 22/10월 TIL(Q. 진행했던 프로젝트에서 어려웠던 부분을 해결한 경험) (0) | 2022.10.27 |
