"Hello World"문자열이 들어간 위치 및 형태
바닐라 자바스크립트 : h1 태그 객에 하위에 innerHTML, innerText에 "Hello World"가 들어가 있다.
리액트 : 리액트가 새로운 객체를 만들어 냈고 props 하위 children 값에 "Hello World"가 들어있는 것을 확인할 수 있다.
위와 똑같이 prorp - children에 값이 들어간 것을 확인할 수있다.
-> 두번째 매개변수에 객체 형태로 children에 값을 넣을 수도 있으며 세번째 매개변수에 직접적으로 값을 넣을 수도 있는 것을 확인함
동시에 값을 주었을 경우 세번째 매개변수의 우선순위가 더 높음을 알 수 있다.
배열로도 값이 전달됨을 확인할 수 있다.
자바스크립트 확장 문법
JSX는 Babel이라는 컴파일러가
JSX -> JavaScrip를 변경해서 브라우저에 보여줄 수 있도록 도와준다.
JSX
const temp = <h1>Hello World</H1>;
컴파일된 JavaScript
"use strict";
const temp = /*#__PURE__*/React.createElement("h1", null, "Hello World");
막상 바꾸면 아무런 내용도 출력되지 않는다. 브라우저가 해석하지 못했기 때문이다.
-> 이는 Babel 컴파일러를 설치하지 않았기 때문이다.
Babel Compiler를 적용해주니 비로서 결과물이 출력되는 것을 확인할 수 있다.
"Hello World"를 변수로 만들어 적용해줄 수 있다.