이 글은 React에 대한 완전히 기초적인 내용을 다룬다. 문법이나 사용법보다는 리액트가 왜 탄생했고, 어떤 식으로 동작하는지에 대해서 다룬다. 문법적인 내용이나 추천하고 싶은 기술 등은 다른 글을 참조하길 바랍니당.
이 때부터 웹개발을 한 것은 아니라 많고 디테일한 지식은 없지만, 아직도 통용되는 웹개발의 기본은 HTML과 CSS와 JavaScript이다. 최초의 HTML은 HyperText Markup Language로서, 인터넷에서 문서를 표기하기 위한 수단으로 개발되었다. 그렇기 때문에 웹으로 주로 서비스를 만들고 있는 현재의 웹은 HTML의 핵심적인 패러다임과 맞지 않았고, 이에 덕지덕지 하나씩 추가되었고, CSS도 그 중의 일부이다. CSS이전엔 HTML로만 디자인을 했지만 디자인 정보를 우겨넣다 보니까 아웃풋을 보지 않으면 HTML이 어떤 내용인지 알아볼 수가 없었고 기존의 구조화된 전략과 맞지 않았다. 따라서 W3C에서는 디자인과 HTML을 분리해보자는 아이디어로 CSS가 개발되었다.
JS는 웹 브라우저에서 제공하는 DOM(Document Object Model)에 접근하기 위해 사용되었다. 여기에서 DOM이 무엇인지, 그리고 리액트에서 흔히 말하는 Virtual DOM이 무엇인지 알 필요가 반드시 생긴다.
DOM은 대체 무엇이길래 사람들이 중요하다고 강조하고 리액트에서도 가상 DOM을 만든 것 일까? 앞서 말했듯, 웹페이지는 문서이다. HTML은 문서를 웹브라우져에서 표시하기 위해서 개발된 언어이다. DOM의 뜻인 Document Object Model에서 Document가 지칭하는 것도 이 문서이다. 간단하게 DOM은 이런 HTML문서의 요소들을 구조화(Modeling)한 것이다. 는 어려우니, 실제로 웹페이지가 어떻게 만들어지는지 살펴봅니다.
웹 브라우저가 원본 HTML을 읽어들이고 Style을 입히고 대화형 페이지로 만들어서 뷰포트에 표시하기까지의 과정을 Critical Rendering Path라고 합니다. 이 과정은 실제로 여러 단계로 나누어져 있지만, 두 단계로 줄여보자면 기본적으로
조금 더 자세하게 서술하자면, 첫 번째 과정을 거치면 Render Tree가 형성됩니다. 브라우저는 Render Tree를 생성하기위해서 DOM, CSSOM이라고 하는 두 가지 모델이 필요합니다.