리액트
리액트의 동작원리
리액트의 동작은 크게 4단계로 나누어져 진행된다.
- 초기랜더링
- 가상 DOM 변경
- 재조정
- 실제 DOM 업데이트
사실 리액트는 더블버퍼링과 비슷한 원리로 수행한다.
더블 버퍼링이란?
주로 컴퓨터 그래픽에서 사용되는 용어로 비디오 메모리만을 사용한
싱글 버퍼링으로 그래픽을 그릴 경우 데이터를 저장하는 동안에는 다음 그림의 데이터를 전송할 수 없기 때문에 깜빡임,찢어짐 그리고 많은 양의 메모리 사용을 하게된다.
이러한 상황을 막는게 더블 버퍼링기법이다.
싱글버퍼링은 비디오 메모리만을 사용하는데에 반해 더블 버퍼링은 예비 버퍼를 두어 먼저 버퍼2에 그림을 보내고 그것을 다시 버퍼1로 보낸다음
버퍼1의 데이터를 처리하는동안 버퍼2에 그림을 보내면 데이터 전송과 처리가 막히는 일이 사라진다.
즉, 기존의 버퍼링에서 한 단계 좀 더 발전된 기법으로, 버퍼(buffer)를 2개 만들어 하나의 버퍼가 출력 상태일때 다른 하나의 버퍼에 출력 데이터를 미리 기록하는 것을 뜻한다.
다시 동작원리로 돌아와서
결국 실제 화면(DOM)은 출력하는 버퍼
그리고 가상 화면(Virtual DOM)은 출력데이터를 미리 기록하는 버퍼
라고 생각하면 좋다.
즉, DOM에서는 그려지는 일만 하게된다. 특히 다른부분만 다시 그려줄 수 가 있다.(업데이트) 왜냐하면 이미 그려진 DOM에 Virtual DOM에서 변경된 부분만 가져오면 되기 때문이다.
직접 DOM을 다시 조작(뭐가 달라졌나~)하고 다시 그리게되면 성능적으로 좋지 않을 수 있는데 이러한점을 Virtual DOM이 분배해서 달라진 부분을 인지해주기 때문에 성능적으로 개선될 수 있다.
리액트의 가상돔 간단정리
- 리액트의 가상돔은 실제 DOM과 같은 내용을 담고 있는 복사본이다.
그리고 이 복사본은 자바스크립트 객체형태로 메모리상에 저장되어있다.- 리액트는 항상 두개의 가상돔을 갖고 있다. 첫번째 가상돔은 변경 이전의 내용을 담고있고, 두번째 가상돔은 변경 이후에 보여질 내용을 담고있다.
- 변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 전에 리액트는 두 개의 가상돔을 비교해서 정확히 어떤 부분이 바뀌었는지 효율적으로 비교하여 파악한다. 이를 Diffing이라고 부른다.
- Diffing을 통해서 변경된 부분들을 파악한 이훙[, 리액트는 Batch Update를 수행함으로 실제 DOM에 한번에 적용시켜준다. 그리고 이러한 과정을 Reconsiliation, 재조정 이라한다.
JSX
타입스크립트와 마찬가지로 자바스크립트의 확장 문법이다.
작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 자바스크립트 코드로 변환된다.
