최종변환?

jsx강의 에서는 jsx는 내부적으로 html/xml코드를 자바스크립트로 변환하는 과정을 거치게 된다. 그래서 최종적으로는 자바스크립트 코드로 나오게 된다. 이렇게 말씀해주시고 jsx코드를 자바스크립트 코드로 변환하게 해주는 것이 react.createElement라고 하셨는데, 여기 강의 에서는 5분 35초 부근에 react.createElement 내부에 리액트 컴포넌트를 적어도 되고 모든 리액트 컴포넌트는 최종적으로는 html 태그를 사용하게 돼있다라고 하셨습니다. react.createElement를 통해서 최종적으로 자바스크립트가 된다는건가요? 아니면 html 코드가 된다는건가요,,?ㅠㅠ

안녕하세요, 소플입니다.

먼저 리액트에서 작성한 컴포넌트가 화면에 렌더링 되기까지는 element로 변환되는 과정을 거쳐야 합니다.

그리고 element는 리액트의 Virtual DOM에 있는 element와,

실제 우리 눈에 보이는 브라우저 DOM에 있는 DOM element로 나뉘게 됩니다.

element라는 단어가 리액트 element와 DOM element에서 모두 등장하기 때문에 조금 헷갈리실 수 있는데,

강의에서 말하는 element는 별도의 언급이 없는한 리액트 element라고 보시면 됩니다.

즉, Virtual DOM에 존재하는 element이며 화면에 실제로 보이는 것이 아니라,

화면에 보이는 실제 DOM element에 대한 정보를 담고 있는 JavaScript 객체입니다.

그리고 이렇게 Virtual DOM에 있는 리액트 element가 실제로 화면에 나타나도록 Browser DOM으로 이동하는 과정이 바로 렌더링입니다.

Virtual DOM ==(렌더링)==> Browser DOM

JSX를 사용해서 작성된 코드는 모두 React.createElement() 함수를 통해 각각 리액트 element로 변환이 되는데, 이 리액트 element는 JavaScript 객체이기 때문에 JavaScript 코드로 변환이 된다라고 표현한 것입니다.

그리고 이렇게 만들어진 리액트 element가 렌더링 과정을 거쳐서 DOM element가 되고,

DOM element는 크롬 개발자 도구의 Elements 탭에서 확인할 수 있듯이 HTML로 나타나게 됩니다.

그래서 전체 과정을 정리하면 아래과 같은 과정을 거친다고 할 수 있습니다.

JSX 코드 (HTML/XML)
=> React.createElement()를 통해 리액트 element로 변환 됨 (JavaScript)
=> Virtual DOM
=> 렌더링
=> Browser DOM (HTML)

결국, 질문해 주신 React.createElement() 함수로 인해 생성되는 것이 JavaScript인지 HTML인지에 대한 답변은 JavaScript 객체(리액트 element)이며, 이 객체가 렌더링이라는 과정을 거치면서 HTML로 변환된다 라고 이해하시면 됩니다.

감사합니다.

인프런 커뮤니티 질문&답변