JSX
createElement를 이용해 엘리먼트를 정의하면 복잡하고 가독성이 떨어진다.
리액트 팀은 ReactElement를 정의하는 간단한 방법으로 JSX 문법을 제공하는데
자바스크립트를 확장한 문법으로 ReactElement를 XML 문법 형식으로 정의할 수 있는 방법이다.
<key>value</key>
단, JSX는 공식적인 자바스크립트 문법이 아니어서 바벨이라는 트랜스 컴파일링 툴이 필요하다.
바벨은 ES6 + ES6 next 문법을 ES5 문법으로 변환해주는 도구인데
JSX를 순수 리액트로 변환해주는 기능도 포함하고 있다. (바벨이 JSX 처리 표준이다.)
1. 바벨 CDN 추가
https://unpkg.com/ : cdn 경로 얻기 위한 사이트
unpkg.com/:package@:version/:file : 다운 받는 경로 작성법
<script src='https://unpkg.com/@babel/standalone/babel.min.js'></script> : 바벨 CDN 추가
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_JSX-intro </title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/@babel/standalone/babel.min.js'></script>
</head>
2. script 태그의 type 속성 추가 : <script type = "text/babel">
<body>
<div id="root"></div>
<script type = "text/babel">
const helloWord = <h1>Hello World!</h1>;
ReactDOM.createRoot(document.getElementById('root')).render(helloWord);
</script>
</body>
</html>
JSX문법은 html 문법과 비슷하지만 차이점이 있다.
JSX 표현법
JSX 문법 내에 중괄호를 이용하여 모든 javascript 표현식(문법)을 넣을 수 있다.
<body>
<div id="root"></div>
<script type="text/babel">
function formatName(user) { //user라는 객체를 받아서 lastName과 firstName을 반환한다.
return `${user.lastName} ${user.firstName}`;
}
const user = {
firstName : 'Gilldong',
lastName : 'Hong'
};
/* JSX 문법 내에 중괄호를 이용하여 모든 javascript 표현식(문법)을 넣을 수 있다. */
const element = <h1>Hello, { formatName(user) }</h1>
ReactDOM.createRoot(document.getElementById('root')).render(element);
</script>
</body>
Fragment
<body>
<div id="root"></div>
<script type="text/babel">
const user = {
name : 'Gildong',
phone : '010-1234-5678'
};
- 아래 내용 -
ReactDOM.createRoot(document.getElementById('root')).render(element);
</script>
</body>
1.최상위 엘리먼트가 두 개 이상이면 에러가 발생한다 -> 하나의 돔 트리만 생성해야 한다. 형제 노드 X
const element = (
<h1>Hello, { user.name }</h1>
<h3>phone : { user.phone}</h3>
); -> 에러 발생
2. <div> 태그로 감싸서 하나의 돔 트리를 생성할 수 있도록 한다. -> 불필요한 div 태그가 생성된다.
const element = (
<div>
<h1>Hello, { user.name }</h1>
<h3>phone : { user.phone}</h3>
</div>
);
3. <React.Fragment>로 감싸서 형식상의 돔 트리상 상위 엘리먼트를 만들어 준다.
const element = (
<React.Fragment>
<h1>Hello, { user.name }</h1>
<h3>phone : { user.phone}</h3>
</React.Fragment>
);
4. React 라이브러리로부터 Fragment 객체만 구조분해할당 해주면 React. 생략 가능하다. -> 미리 정의해서 사용
const { Fragment } = React; // React의 기능 중에 Fragment를 꺼내서 사용할거야
const element = (
<Fragment>
<h1>Hello, { user.name }</h1>
<h3>phone : { user.phone}</h3>
</Fragment>
);
5. React.Fragment의 축약 문법인 <></>로 감싸서 사용할 수 있다 (babel 17 부터 제공)
const element = (
<>
<h1>Hello, { user.name }</h1>
<h3>phone : { user.phone}</h3>
</>
);
attribute
JSX는 HTML 태그처럼 보이지만 실제로는 자바스크립트이다. (React.createElement를 호출하는 코드로 컴파일 된다.)
따라서 자바스크립트의 예약어와 동일한 이름의 attribute는 다른 이름으로 우회적으로 사용하도록 정의되어 있다.
<head>
<style>
.hightlight {
background-color: red;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
1. 문자열로 속성 값 정의하는 방법
const element = <h1 id="title" className="hightlight">Hello World!</h1>
//id는 id, class는 className
2. 자바스크립트 표현식을 이용하는 방법
const id = "title"
const className = "hightlight"
const element = <h1 id={ id } className={ className }>Hello World!</h1>;
ReactDOM.createRoot(document.getElementById('root')).render(element);
</script>
</body>
inline style attribute
style 속성에 객체 형태의 attribute를 추가해야 한다.
객체의 속성명은 카멜 케이스로 작성한다.
속성 값은 문자열 혹은 숫자 형태로 작성해야한다.
<body>
<div id="root"></div>
<script type="text/babel">
const style = {
backgroundColor : 'black', // 속성명(key) 카멜케이스, 속성값(value) 숫자 or 문자열
color : 'white',
cursor : 'pointer',
textAlign : 'center',
padding : 20
// 단위를 작성하려면 문자열로 사용하지만('20px') 단위를 생략하면 숫자만 사용 가능
};
const element = (
<>
<h1 style={ style }>Hello World!</h1> //객체 형태의 어트리뷰트 추가
<h3>inline styling test</h3>
</>
);
ReactDOM.createRoot(document.getElementById('root')).render(element);
</script>
</body>
event-attribute
<body>
<div id="root"></div>
<script type="text/babel">
1. 인라인으로 간단한 이벤트 적용 시 JSX의 자바스크립트 표현식 내에 이벤트 처리 함수 작성 가능
const element = (
<>
<h1>Event Attribute</h1>
<button onClick={ () => alert('Hello World!') }>클릭하세요</button>
</>
);
-> html의 인라인 요소가 아니라 리액트로 처리하여 자바스크립트 코드로 컴파일 된다.
2. 이벤트 동작 시 사용할 핸들러 메소드 사전 정의 후 JSX 내에 표현식으로 사용
const onClickHandler = () => {
alert('Hello World!');
};
const element = (
<>
<h1>Event Attribute</h1>
<button onClick={ onClickHandler }>클릭하세요</button>
</>
);
ReactDOM.createRoot(document.getElementById('root')).render(element);
</script>
</body>
-> 정의된 함수 onClickHandler를 onClick 에 전달한다.
JSX 주석 사용법
{/* 주석 작성*/}
개행 // 주석 작성
<body>
<div id="root"></div>
<script type="text/babel">
const element = (
<>
<h1>Comment in JSX</h1>
{/* JSX 내에서의 주석은 이렇게 작성합니다. */}
<h3
id="text" //시작 태그를 여러 줄로 작성한다면 여기에도 주석 작성 가능
className="text"
>
JSX 내의 주석 사용하는 방법
</h3>
/*하지만 이런 주석이나*/
//이런 주석은 페이지에 그대로 나타내게 됩니다.
</>
);
ReactDOM.createRoot(document.getElementById('root')).render(element); //랜더링
</script>
</body>
