바닐라 자바스크립트에 Babel 적용(기초)

프동프동·2022년 9월 29일
0

JavaScript

목록 보기
3/3
post-thumbnail

바닐라 자바스크립트에 Babel 적용(기초)


Hello World 출력하기

바닐라 스크립트(Vanilla Javascript)

  • id가 “root”인 div 태그에 “Hello Wrold!” 문자열이 들어간 자식 엘리멘트를 추가한 결과

"Hello World"문자열이 들어간 위치 및 형태

바닐라 자바스크립트 : h1 태그 객에 하위에 innerHTML, innerText에 "Hello World"가 들어가 있다.

React

createElement() 두번째 매개변수로 객체를 넘겨 사용할 수 있다.

리액트 : 리액트가 새로운 객체를 만들어 냈고 props 하위 children 값에 "Hello World"가 들어있는 것을 확인할 수 있다.

createElement() 두번째 매개변수로 넘기지 않고 세번째 매개변수에 직접적으로 값을 넘길 수도 있다.

위와 똑같이 prorp - children에 값이 들어간 것을 확인할 수있다.

-> 두번째 매개변수에 객체 형태로 children에 값을 넣을 수도 있으며 세번째 매개변수에 직접적으로 값을 넣을 수도 있는 것을 확인함

우선순위

동시에 값을 주었을 경우 세번째 매개변수의 우선순위가 더 높음을 알 수 있다.

배열

배열로도 값이 전달됨을 확인할 수 있다.


JSX

자바스크립트 확장 문법

  • React.createElement()를 좀 더 편리하게 사용하기 위한 문법 + 알파

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 적용

Babel sdn


Babel Compiler를 적용해주니 비로서 결과물이 출력되는 것을 확인할 수 있다.

JSX. 변수처럼 만들어 사용할 수 있다.


"Hello World"를 변수로 만들어 적용해줄 수 있다.

profile
좋은 개발자가 되고싶은

0개의 댓글