JSX에 속성 지정
따옴표를 사용하여 문자열 리터럴을 속성으로 지정할 수 있습니다.
|
|
속성에 JavaScript 표현식을 포함하기 위해 중괄호를 사용할 수도 있습니다.
|
const img_element1 = <img src={image_url1} width="80" height="80" />;
|
중괄호 앞뒤로 따옴표를 지정하면 문자열로 인식하므로 주의하시기 바랍니다.
다음은 완성된 전체 코드 입니다.
|
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
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 예제 006</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>
<script type="text/babel">
window.onload = () => {
const image_url1 = "https://choongang202407.github.io/images/penguin2.png";
const image_url2 = "https://choongang202407.github.io/images/react_logo.png";
const image_url3 = "https://choongang202407.github.io/images/penguin3.jpg";
const link_element = <a href="https://reactjs.org/docs/introducing-jsx.html">JSX 튜토리알로 가기</a>;
const img_element1 = <img src={image_url1} width="80" height="80" />;
const img_element2 = <img src={image_url2} width="80" height="80" />;
const img_element3 = <img src={image_url3} width="80" height="80" />;
ReactDOM
.createRoot(document.querySelector('#app'))
.render(
<div>
{img_element1}
{img_element2}
{img_element3}
<br />
{link_element}
</div>
);
}
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
cs |
다음은 실행 결과 입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 07] HTML로 시작해보는 React 엘리먼트 렌더링 (6) | 2024.10.15 |
|---|---|
| [React Exam 06] HTML로 시작해보는 React JSX Style 사용하기 (1) | 2024.10.15 |
| [React Exam 04] HTML로 시작해보는 React JSX 함수 표현식 사용 (0) | 2024.10.15 |
| [React Exam 03] HTML로 시작해보는 React JSX JavaScript 표현식 포함하기 (0) | 2024.10.15 |
| [React Exam 02] HTML로 시작해보는 React JSX(JavaScript를 확장한 문법) (0) | 2024.10.15 |
