[React] JSX, Babel, 스프레드 연산자
반응형
📝 이전 내용 복습
<script>
const rootElement = document.getElementById("root");
const element = React.createElement(
"h1",
{
className: "title",
children: "Hello, world!!!!!!!!!!!!!!!!",
},
"Hello, world??????????" // 세번째 인자를 먼저 그려준다.
);
ReactDOM.render(element, rootElement); // (주입할 대상, root) -> 자바스크립트로 따지면 append()
</script>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement(
"h1",
{
className: "title",
children: ["Hello, world", " 나야!", " 가자!"] // 무한히 넣어줄 수 있다.
});
ReactDOM.render(element, rootElement); // (주입할 대상, root) -> 자바스크립트로 따지면 append()
</script>
- 하지만
React.createElement를 사용해서 계속해서 태그를 만드는 것은 불편하다. → JSX 사용하면 불편 해결!
🎯 JSX
- 문자도 HTML도 아닌 JacaScript의 확장 문법이다.
예시
const element = <h1>Hello, World!</h1>;- JS도 아닌 HTML도 아닌 중간의 애매한 영역처럼 느껴진다.
- React.createElement 표현식을 편하게 사용하기 위한 표현식
🎯 Babel
- 자바스크립트 컴파일러
- 컴파일러 : 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램이다.
- 즉, JSX 표현식을 자바스크립트가 이해할 수 있도록 컴파일해주는 도구이다.
<script src="<https://unpkg.com/@babel/standalone/babel.min.js>"></script>
예시
// JSX
const element = <h1>Hello, World!</h1>;
// JSX문법을 바벨로 컴파일러
const element = /*#__PURE__*/React.createElement("h1", null, "Hello, World!");- 결국 바벨이 JSX를 이전에 만들어보았던
React.createElement로 컴파일해준다.
📝 바벨 사용법
- 스크립트 태그에
<script type="text/babel">를 붙여준다.- 이 스크립트는 바벨이 컴파일해줘야 된다는 것을 알려준다.
📝 바벨 장점
- 모든 것을 변수화 할 수 있다.
<body>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const text = "Hello, World!";
const titleClassName = "title111";
const customH1 = <h1 className={titleClassName}>{text}</h1>;
const elemet = customH1;
ReactDOM.render(elemet, rootElement); // (주입할 대상, root)
</script>
</body>
- JSX -> React.createElement 표현식
- Babel -> JavaScript Complier
- JSX 다루기 -> spread 연산자
📝 스프레드 연산자 사용
<body>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const text = "Hello, World!";
const titleClassName = "title111";
const props = {className: titleClassName, children: text};
// const customH1 = <h1 {...props} />; //전개 연산자를 활용해서 객체 자체를 주입할 수 있다.
//위 스프레드 연산자를 사용하면 아래처럼 표현된다.
const customH1 = (
<h1 className={props.className} children={props.children} />
);
const elemet = customH1;
ReactDOM.render(elemet, rootElement); // (주입할 대상, root)
</script>
</body>
🏷 요약
일반 사용
const text = "Hello, World!";
const titleClassName = "title111";
const customH1 = <h1 className={titleClassName}>{text}</h1>;
전개 연산자 사용
const props = {className: titleClassName, children: text};
const customH1 = <h1 {...props} />;
전개 연산자를 사용하면 아래처럼 표현됨
const props = {className: titleClassName, children: text};
const customH1 = (
<h1 className={props.className} children={props.children} />
);- 전개 연산자를 잘 활용하자
반응형
'프로그래밍 > React' 카테고리의 다른 글
| [React] Element 찍어내기 (0) | 2021.09.11 |
|---|---|
| [React] 멀티 Element 생성하기 :: React.Fragment (0) | 2021.09.11 |
| [React] ReactDOM.render (0) | 2021.09.11 |
| [React] React 엘리먼트 생성하기 :: createElement() (0) | 2021.09.11 |
| [React] 리액트 기본 설정하기 (0) | 2021.09.10 |