2021년 11월 12일에 작성한글입니다.
이전글
JSX ( Javascript Syntax eXtension )
- Javascript 문법을 Xml처럼 사용할 수 있게 해주는 Javascript 확장문법
- React.createElement()를 사용하여 객체를 만드는 불편함 해소 및 코드 간소화
- 대부분의 React 개발자는 JSX를 사용한다고 보면 된다.
(요즘은 선택이 아니라 필수라고 봐도 무방하다.)
Babel
- 공식 사이트 : https://babeljs.io/
- 최신 Javascript(ES6, ES7 등..) 문법을 예전 브라우저에서 표출 시키기 위해 일반 Javascript 문법으로 변환해주는 컴파일러
- JAX로 작성한 코드는 브라우저에 표출되기 전에 일반 Javascript로 변환하는 과정이 필요하기 때문!
Babel More
Babel의 소스변환 예제
변환 데모 : https://babeljs.io/repl
// JSX 문법
const Title = (
<h3 id="title"
onClick={() => console.log('테스트') }
>
제목 내용입니다.
</h3>
)
// Babel 변환 후
"use strict";
const title = /*#__PURE__*/React.createElement("h3", {
id: "title",
onClick: () => console.log('테스트')
}, "\uC81C\uBAA9 \uB0B4\uC6A9\uC785\uB2C8\uB2E4.");1. Babel 추가
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<sctipt type="text/babel">
// Javascript
</script>2. JSX로 html 태그 생성하기
// 기존 html 문법 처럼 사용이 가능하다
let SampleDiv = <div>Hello World</div>;
let SampleButton = <button id="btnSample">클릭해주세요</button>;
ReactDOM.render([SampleDiv, SampleButton], document.body);3. JSX로 html 속성값 입력하기
let SampleDiv = (
<div
id="sampleDiv"
class="sample-div"
style={{
padding: '8px 0',
color: 'red'
}}
>
Hello World
</div>
);
let SampleButton = (
<button
id="btnButton"
onClick={() => {
console.log('클릭완료');
}}
>
클릭해주세요
</button>
);
ReactDOM.render([SampleDiv, SampleButton], document.body);
4. 컨테이너에 html 추가하기
// Arrow Function 을 통한 함수화 작업
let SampleDiv = () => (
<div
id="sampleDiv"
class="sample-div"
style={{
padding: '8px 0',
color: 'red'
}}
>
Hello World
</div>
);
// 함수 표현은 다른 형식으로도 표현 가능
function SampleButton() {
// 속성값 생략
return <button>클릭해주세요</button>;
}
let SampleButton = function() {
// 속성값 생략
return <button>클릭해주세요</button>;
}
let Container =
<div id="container">
<SampleDiv/> // 기존 객체를 함수화 하는것이 필수!
<SampleButton/>
<span style={{ 'margin-left':'8px' }}>
버튼을 클릭하세요
</span> // 이런 식으로도 추가가 가능하다.
</div>
ReactDOM.render(Container, document.body);
5. 전체 소스코드
<!DOCTYPE html>
<html>
<body></body>
<script src="https://unpkg.com/react@16.7.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
let SampleDiv = () => (
<div
id="sampleDiv"
class="sample-div"
style={{
padding: '8px 0',
color: 'red'
}}
>
Hello World
</div>
);
let SampleButton = () => (
<button
id="btnButton"
onClick={
() => {
console.log('클릭완료')
}
}
>
클릭해주세요
</button>
);
// 함수화 예제 1
// let SampleButton = function() {
// return <button
// id="btnButton"
// onClick={
// () => {
// console.log('클릭완료')
// }
// }
// >
// 클릭해주세요
// </button>;
// }
// 함수화 예제 2
// function SampleButton() {
// return <button
// id="btnButton"
// onClick={
// () => {
// console.log('클릭완료')
// }
// }
// >
// 클릭해주세요
// </button>;
// }
let Container =
<div id="container">
<SampleDiv/>
<SampleButton/>
<span style={{'margin-left':'8px'}}>버튼을 클릭하세요</span>
</div>;
ReactDOM.render(Container, document.body);
</script>
</html>
개발자