Web Front-end/React

[React/JS/SPA/Render] React의 Rendering

우선, React와 JS의 Render에서 차이점을 명확하게 봅시다.

JSX로 뭐 HTML Element 찍어내는거 , 재사용성 좋아진거 맞습니다. 하지만 JS는 결국 Interaction이 중요합니다. 바닐라 JS는 변경이 일어나면 , Element들을 다 다시 그리게 됩니다. 이 코드를 우선 보시죠.

const rootEl=document.getElementById("root");

const randomBtn = () =>{
  const random = Math.floor(Math.random() * 10 + 1);
  const btnEl = `
  <button>${random}</button>
  `
  rootEl.innerHTML = btnEl;
}
setInterval(randomBtn,2000);

2초마다 특정 이벤트가 발생했을 때, DOM의 변화를 보여드리겠습니다. 

See the Pen Untitled by Doge (@DogeIsFree) on CodePen.

 

그리고, 개발자 도구로 본 DOM의 변화입니다. div도 깜박이고 ,button도 깜박입니다. 즉, 둘 다 다시 Paint하는 작업이 이루어진겁니다.

div와 button이 모두 바뀝니다.

React의 Rendering

현재의 React는 State라는 특이한 자료형같은 객체를 사용해서 상태를 관리합니다만,  우선 변화를 좀 극적으로 보여주기 위해서 , 옛날 코드로 작성해보겠습니다. 

(Render도 옛날 방식입니다. 사실 ,  react 18 버전으로 하면, div까지 다 렌더링 되서, 데이터만 딱 렌더링 시키려면 state를 사용해야해서,  많이 찾아봤습니다. 흨)

 

See the Pen RandomBtn(JS) by Doge (@DogeIsFree) on CodePen.

 

 

45,27과같이 button만 바뀝니다!

 

즉, 해당 DOM만 딱 짚어서 바꿔내는 방식을 React 내에서는 사용하고 있습니다.  원하는 DOM을 효율적으로 찾기위해서  사용된 기술이 Virtual DOM으로, Virtual DOM은 DOM과 똑같이 하나를 더 만들어서, React가 계속 Watch(지켜보기)하고 있다가, 바뀐 부분만 다시 칠해주는 방식입니다.  그리고, 바뀌는 부분(Data)를 React의 생태계에서는 State라고 합니다.

이 외에도 , 기존의 JS의 Repaint, Reflow 문제에 대해서도 어느정도의 이득을 볼 수 있고, 해당 데이터만 바뀜으로써, 화면이 깜빡일 필요가 없습니다. 여기서, React의 특징을 하나 더 알 수 있습니다.

React의  Component 불변성

React에 Render되는 객체 자체가 바뀌지 않습니다. Button 객체는 그대로 있습니다.  객체 안의 Data가 바뀌기 때문에, 화면 깜박임이 없습니다. Data만 Change 해주는 과정은 React에게 일임되어 있습니다.

 

React에서 Event를 섞는다면 어떻게 될까요 ?

input 창 1개에, 입력 버튼 1개를 만들어서, 입력 중 이면 밑에 입력중입니다~ 라는 표시가 뜨고, 입력이 완료되면, 해당 입력결과를 보여주는 view를 구성해볼겁니다. useState는 다음시간에 해볼겁니다! 일단, assign과 render를 이용해서, setState를 구현 해줄겁니다.

See the Pen RandomBtn(React) by Doge (@DogeIsFree) on CodePen.

 

사실, 이러한 Rendering을 가지게된 이유는 Facebook이 SNS 서비스라는 점도 크게 작용했습니다.

Facebook은 실시간으로 LikeButton이 눌러지면, 모든 사용자들에게도 Like가 반영이 되어야할 텐데, 그때마다 render를 다시해주려면, 기존 JS로는 브라우저의 DOM을 다 다시 그려야했습니다.