render함수의 createElement props에 대해 질문드립니다.

Question

안녕하세요 선생님. 이번 강의를 수강하면서 render()함수에 대해 기본적으로 createElement 함수가 콜백으로 전달되는건가요? 여기서 createElement는 vue내부에서 구현해놓은 함수인가요?  createElement에 파라미터로 전달하면,   '태그이름', '태그 속성', '하위 태그 내용'을 template에 그려주는 것으로 설명해주셨는데..  이때 render() 함수는 template과 같은 기능을 하는건가요?template과 render의 차이점은 무엇인가요? 그럼 답변 부탁드릴게요:-)  읽어주셔서 감사합니다.

캡틴판교 · Answer

안녕하세요 예란님 오랜만에 또 좋은 질문 주셨네요 :) render 함수의 첫 번째 파라미터로 createElement 함수가 들어옵니다 :) createElement는 Vue.js 라이브러리 내부적으로 구현해놓은 함수가 맞아요. https://vuejs.org/v2/guide/render-function.html 저는 보통 render 함수 설명을 할 때 리액트를 예시로 말씀 드리는데요. 질문주신 render 함수는 리액트가 화면단 코드(HTML, CSS)를 자바스크립트로 작성하는 것과 유사한 방식입니다. 저희는 뷰를 사용하기 때문에 말씀해주신 template 속성에 원래 하던대로 HTML, CSS 코드를 작성하면 Vue.js 내부적으로 render 함수로 변환을 해주게 돼요. 따라서, 리액트의 화면단 코드 작성 사고 방식(JSX)을 따라 할 필요가 없게 됩니다. 아래 사이트에서 한번 템플릿 코드를 작성해보시면 뷰 라이브러리 내부적으로 어떻게 template 속성에 들어간 코드를 자바스크립트 함수로 변환하는지 볼 수 있을거에요. https://template-explorer.vuejs.org/#%3Cdiv%20id%3D%22app%22%3E%7B%7B%20msg%20%7D%7D%3C%2Fdiv%3E 매번 깊이 있고 좋은 질문 주셔서 감사합니다. 나머지 강의도 재밌게 들으세요 :) 장기효 드림

김동민 · Answer

맨 아래 올려주신 링크에서 보니까 이해가 확 되네요 .. 질문자님, 기효님 감사합니다..!