React

React란

Meta (전 Facebook) 에서 2011년에 만든 프론트엔드 라이브러리 (프레임워크)

React의 작동원리

 

SPA(Single Page Application)

=> 하나의 HTML 파일만 보여주고 내부 요소는 모두 자바 스크립트를 활용해 변경 시키는 것.

기존의 방식은 페이지가 변경될때 마다 무조건 새롭게 HTML, CSS파일을 표시해야했던 예전 방식보다

훨씬 효율적

 

Virtual Dom with Diff Algorithm

DOM은 HTML 문서를 통해서 생성된 자바스크립트를 통해서 조작 가능한 요소들. 

(쉽게 말하면 크롬 개발자도구에서 보이는 그 요소들을 생각하면 된다.)

 

React는 가상으로 HTML 요소들을 생성하고 (Virtual DOM), 현재 화면에 표시되는 HTML 요소들(Real DOM)과

비교해서, 달라진 부분만 다시 그리는 방식으로 렌더를 진행.

 

요소가 달라질 때마다 새롭게 화면을 다 다시 그리는 것이 아니라 달라진 부분만 알아서 React가 다시 그려준다. 

 

Component?

 

React는 component 라는 것을 작성해서 조합하는 방식으로 코딩을 진행 

 

Component란 무엇인가? 

하나의 HTML 페이지에서 요소들을 잘게 나눈것이라고 생각하면 된다. 

 

=> 하나의 페이지를 잘게 나누면 어떤 장점이 있을까?

팀으로 하나의 페이지를 작성할 때 요소 별로 나눠서 작업 가능, 복잡한 페이지의 코드를 조금 더 직관적으로 볼수 있음 

등등 다양한 장점이다.