JSX없이 리액트 만들기.
jsx가 리액트에서만 쓰는 문법인 줄로만 알고 있었다.
공부하면서 브라우저 랜더링에 관해서부터 한번 더 살펴보았다.
브라우저는 DOM을 통해 어플리케이션을 렌더링하고,
html을 파싱해서 만든 엘리먼트를 사용한다.
엘리먼트는 문서를 구성하는 기본 요소가 되고,
document.createElement()함수로 만들 수 있다.
리액트를 이루는 최소단위는 리액트 엘리먼트이고,
이것은 브라우저 DOM 엘리먼트와 달리 일반 객체이다.
React.createElement()를 써서, 리액트 엘리먼트 트리를 갱신하는데 쓸 수 있다.
JSX를 사용하면 React.createElement() 호출을 반복해야 하는 불편을 해소해준다. 필수적이지는 않지만 리액트에 잘 어울린다.
즉, JSX는 createElement 함수에 대한 문법적 설탕(Syntactic sugar)일뿐이다.
이렇게 매번 작은 React Element 트리, VDOM 트리를 만든다.
VDOM은 브라우저 API위에 있는 자바스크립트 라이브러리에서 구현되는 개념으로
메모리상에 있는 가상적인 DOM이다.
VDOM을 쓰는 이유는, 빨라서라기 보다는 충분히 빠르기도 하지만 유지보수를 가능하게 하기 때문에 사용한다.
리액트 엘리먼트를 가상 돔으로 만들어 실제 돔에 반영해주는 역할은 React.DOM이 해주고, 이 과정은 재조정이라고 한다.
개발자는 key prop을 통해 재조정을 조절할 수 있다.
느낀점
기초가 가장 중요하다는 것을 느낀다.
머릿속에 그림이 조금 더 명확하게 그려지는 느낌이다.
이렇게 차곡차곡 쌓아서 지금보다 리액트를 더욱 리액트스럽게 다룰 수 있었으면 좋겠다.
