JSX에 표현식 포함하기
name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용하였습니다.
여러줄로 표현할 때는 ()안에 기술하면 됩니다.
JSX내에서 주석은 {/* 과 */} 사이에 기술하면 됩니다.
JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다.
2+2와 같은 연산은 물론 함수의 호출도 가능합니다.
|
const name = '한사람';
const age = 18;
// 변수를 선언한 다음 호출된 요소에서 중괄호로 묶어 JSX 내에서 사용합니다.
const element1 = <h3>{name}님 반갑습니다.</h3>;
// 여러 줄로 입력할 경우에는 ()안에 기술하면 됩니다.
const element2 = (
<div>
{/* 나는 JSX 주석입니다. 변수의 내용을 출력하려면 {변수명} 입니다. */}
{name}님 방문을 환영합니다. <br/>
"<b>{name}</b>"님 내년 나이는 <b>{age+1}세</b> 입니다. <br/>
만세 삼창 : {'만세! '.repeat(3)} <br/>
</div>
);
|
다음은 완성된 전체 코드 입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 예제 004</title>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 반드시 type속성을 type="text/babel"으로 지정해야 됩니다. -->
<script type="text/babel">
window.onload = () => {
const name = '한사람';
const age = 18;
// 변수를 선언한 다음 호출된 요소에서 중괄호로 묶어 JSX 내에서 사용합니다.
const element1 = <h3>{name}님 반갑습니다.</h3>;
// 여러 줄로 입력할 경우에는 ()안에 기술하면 됩니다.
const element2 = (
<div>
{/* 나는 JSX 주석입니다. */}
{name}님 방문을 환영합니다. <br/>
"<b>{name}</b>"님 내년 나이는 <b>{age+1}세</b> 입니다. <br/>
만세 삼창 : {'만세! '.repeat(3)} <br/>
</div>
);
ReactDOM
.createRoot(document.querySelector('#app'))
.render(
<div>
<div>{element1}</div>
<hr/>
<div>{element2}</div>
</div>
);
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
cs |
다음은 실행 결과 입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 06] HTML로 시작해보는 React JSX Style 사용하기 (1) | 2024.10.15 |
|---|---|
| [React Exam 05] HTML로 시작해보는 React JSX 속성 표현식 사용하기 (0) | 2024.10.15 |
| [React Exam 04] HTML로 시작해보는 React JSX 함수 표현식 사용 (0) | 2024.10.15 |
| [React Exam 02] HTML로 시작해보는 React JSX(JavaScript를 확장한 문법) (0) | 2024.10.15 |
| [React Exam 01] HTML로 시작해보는 React Application (3) | 2024.10.15 |
