React 란?
Facebook 에서 만든 UI 컴포넌트 라이브러리입니다. 리액트 공식 홈페이지에서 설명하는 리액트의 특징들은 다음과 같습니다.
특징
리액트는 컴포넌트 기반 아키텍쳐이다.
컴포넌트는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 뜻합니다.
현대의 웹은 아주 크고 복잡합니다. 그러므로 복잡한 문제를 작게 나누어서 해결하기 위해서는 컴포넌트 기반으로 개발을 해야할 필요가 있죠. 게다가 컴포넌트 단위로 코드를 작성하면 캡슐화(테스트 가용성, 신뢰성), 확장성, 결합성, 재사용성같은 이점이 있습니다.
기존의 웹 개발 방식은 관심사의 분리보단 마크업, 디자인, 로직을 분리하는 기술의 분리에 가까웠습니다. 하지만 React는 기존의 방식이 아닌 컴포넌트 형태로 관심사를 분리하였습니다.
React.js는 컴포넌트로써 마크업과 뷰의 로직은 createClass()의 안에 작성합니다. 하지만 마크업은 HTML 이나 mustache로 작성하고 뷰의 로직은 자바스크립트로 나누어서 작성하는 기존의 방식을 취하지 않아 마음에 들지 않는 사람도 있을 수 있습니다. 이 사안에 대해서 React 의 개발자인 Pete Hunt 는
그것은 관심사의 분리(Separation of concerns) 가 아니라 기술의 분리(Separation of technologies)
라며 마크업과 뷰의 로직은 긴밀해야 한다고 언급했습니다. 거기에 템플릿의 문법으로 불필요하게 코드를 작성하는 것보다 자바스크립트로 작성하는 것이 더 좋다고 말하고 있습니다.
JSX
JSX는 자바스크립트 확장문법으로 템플릿엔진(우리가 알고 있는 걸로는 jsp, ejs,pug 등이 있다)이라 불리는 것과 유사한 방식의 표현식입니다. 간단히 말해서 자바스크립트 문법과 HTML 태그가 혼용되어 사용되는 방식입니다. 많은 개발자들이 JSX 사용을 선호하는 이유에 대해서 간단히 알아보자면,
- HTML 친화적이라 어렵지 않게 작성할 수 있다.
- 마크업과 로직을 분리하지 않고 UI 작성이 가능하다.
- 리액트 컴파일 과정에서 에러를 감지할 수 있다.
JSX를 무조건 사용해하 하는것은 아니지만, React에서 사용하는 것을 권고하고 있으므로 사용하는 것이 좋습니다.
Virtual DOM
유저와 상호작용이 많은 요즘 웹 페이지를 개발하는데 예전 웹 개발 방식으로 개발하게 될 시에 발생하는 다른 문제점이 있습니다.
jQuery 방식의 문제
- DOM 에 변화가 생기면 렌더 트리를 재생성한다.
- 이 과정에서 모든 요소들의 스타일이 다시 계산되고, 레이아웃을 만들고 페인팅을 하는 과정이 반복된다.
- DOM 조작이 많이 발생한다면 브라우저가 변화를 적용하기 위해서 많은 연산을 해야한다.
브라우저에서 한번의 웹 페이지 화면을 렌더링 하기 위한 과정들을 대략적으로 살펴보면 다음과 같습니다.
- 브라우저의 렌더 엔진이 HTML 파싱후 DOM Tree를 생성합니다.
- DOM 트리의 노드가 가진 attach 메서드를 통해 스타일 정보를 계산하고 객체 형태로 반환합니다.
- DOM 트리에 새로운 노드가 추가되면 노드의 attach 메서드가 실행 되어 Render Tree를 생성합니다.
- 스크린 좌표를 참조하여 표시 위치를 결정합니다.
- 그리고 렌더링된 요소에 색을 입히는 painting 과정을 마칩니다.
React 는 이 부분을 Virtual DOM을 사용해 성능을 개선하였습니다.
Virtual DOM의 동작과정
Virtual DOM은 새로운 개념이 아닙니다. DOM 트리의 변화를 감지하여 실제 변경이 일어난 부분에 대해 오프라인 DOM에 적용하고, 모든 연산이 끝나면 최종적으로 변경된 부분을 실제 DOM에 한번 적용시키는 것입니다. 따라서 사용자가 웹 페이지를 이용할때, 어떤 data 값이 변한다면 즉각적으로 해당 부분의 변경된 모습을 반영해주고, 내부적으로 DOM 연산이 완료되어지면 그때 부드럽게 이어지는 화면을 보여주는 것입니다. 따라서 사용자는 화면의 즉각적인 변화를 끊김없이 연속된 화면으로 이용할 수 있습니다.
