개발일지

jsx가 dom으로 렌더링되는 과정 정리

드디어 때가 되었습니다.
이 블로그는 지난 한달간 React를 탐구하기 위해 달려왔다고 해도 과언이 아닙니다.
최신 React소스는 es6, node.js, 태스크러너, Babel, 번들러 ide활용술을 모두 파악해야 겨우 접근할 수 있습니다.

첫번째 난관이었던 JSX는 어떤 절차를 거쳐서 dom엘리먼트로 바뀌나? 에 대한 해답을 얻었기에 포스팅합니다.

React.js의 컴퍼넌트는 다음과 같은 세 단계의 작업을 거쳐서 dom엘리먼트로 바뀝니다.
1. 컴퍼넌트 정의
2. React 엘리먼트 팩토리 생성
3. 컴퍼넌트의 DOM 렌더링

1. 컴퍼넌트 정의

컴퍼넌트를 정의하는 방법에는 크게 3가지가 있습니다.
1. React.createClass 함수와 JSX를 사용하는 방법
2. React.createElemen 함수를 직접 호출해서 조합하는 방법
3. React.DOM.* 휘하의 함수를 호출해서 조합하는 방법

2,3번 방법은 차라리 DomScript를 직접 사용하는것이 좋겠다고 생각할 정도로 코딩양이 많습니다.
JSX트랜스파일러를 사용하면 2,3번의 코드를 기계가 작성하도록 지시할 수 있습니다.
이때의 개발자 인터페이스가 JSX인 것이구요.
아마 2,3번으로 코딩할 일은 거의 없지 않을까요?
바닐라 자바스크립트도 조금만 코딩하면 손목이 아픈데..

2. React 엘리먼트 팩토리 생성

이 방법은 React.createFactory함수의 호출로 통일되어 있습니다.
그러나 ReactDom.render 함수가 내부적으로 React.createFactory를 실행시키므로 평상시에 사용할 일은 드뭅니다.

3. 컴퍼넌트의 DOM 렌더링

React의 튜토리얼에 반드시 등장하는 ReactDom.render함수가 담당합니다.

위 방법을 조사한 결과 다음과 같은 예제 코드가 작성되었습니다.
우선 컴퍼넌트를 1개 생성한 다음,
1) ReactDom.render함수에 바로 전달하는 방법
2) React.createFactory => ReactDom.render 순으로 전달하는 방법
을 증명할 수 있었습니다.

See the Pen React의 렌더링 과정 추적하기 by cinos (@shoveller) on CodePen.

결론

확실히 react를 사용하면 view component를 사용한다는 느낌이 강하게 오네요.
컴퍼넌트 단위의 자동화된 유닛 테스트가 멀지 않았습니다!