다음은 완성된 전체 코드 입니다.
|
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 예제 013</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 src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/ko.js"></script>
<script type="text/babel">
dayjs.locale('ko');
let date = dayjs().subtract(1, 'day').format('YYYY-MM-DD'); // 어제날짜
let address = "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json";
let queryString = "?key=82ca741a2844c5c180a208137bb92bd7&targetDt=";
function Item(props) {
const rank = (props.item.rank+"").padStart(2,'0');
const image_url = `./images/number/j_${rank}.png`;
return (
<div>
<img src={image_url} width="30" height="30"/>
<b style={{fontSize:"16pt"}}>{props.item.movieNm}</b>
({props.item.openDt})
</div>
);
}
window.onload = () =>{
// console.log(date);
document.querySelector("#date").value = date;
document.querySelector("#btn").onclick = ()=>{
let value = document.querySelector("#date").value;
let targetDt = value.split("-").join("");
let url = address + queryString + targetDt;
fetch(url)
.then((response) => {
return response.json();
}).then((json) => {
return json.boxOfficeResult.dailyBoxOfficeList;
}).then((list)=>{
ReactDOM.createRoot(document.querySelector('#app')).render(
<div>
<h2>일간 박스오피스({value})</h2>
<hr/>
{
list.map((item, index) => {
return <Item item={item} key={index}/>
})
}
</div>
);
});
}
document.querySelector("#btn").onclick();
}
</script>
</head>
<body>
날짜선택 : <input type="date" id="date"> <button id="btn">박스오피스보기</button>
<div id="app"></div>
</body>
</html>
|
cs |
다음은 실행 결과 입니다.
위의 코드는 내용은 나오지만 React를 정확하게 사용한 것이 아닙니다.
매번 날짜를 변경할때마다 객체를 다시 생성해서 화면을 그려주기 때문에 React의 장점을 전혀 사용하지 낳았으며 바닐라 스크립트로도 동일하게 처리가 가능합니다.
React의 기능을 사용한다면 다음과 같이 해야 합니다.
|
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 예제 014</title>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script async src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/ko.js"></script>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react?dev",
"react-dom/client": "https://esm.sh/react-dom/client?dev"
}
}
</script>
<script type="text/babel" data-type="module">
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { useState, useEffect } from 'react';
// dayjs.locale('ko');
let date = dayjs().subtract(1, 'day').format('YYYY-MM-DD'); // 어제날짜
let address = " http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json";
let queryString = "?key=82ca741a2844c5c180a208137bb92bd7&targetDt=";
let data=[];
async function getData(url){
const response = await fetch(url);
const jsonData = await response.json();
return jsonData.boxOfficeResult.dailyBoxOfficeList;
}
function Item(props) {
const rank = (props.item.rank + "").padStart(2, '0');
const image_url = `./images/number/j_${rank}.png`;
return (
<div>
<img src={image_url} width="30" height="30" />
<b style={{ fontSize: "16pt" }}>{props.item.movieNm}</b>
({props.item.openDt})
</div>
);
}
function App() {
let [data, setData] = useState(data);
let [value, setValue] = useState(date);
useEffect(() => {
// 최초에만 실행해라!!!
if(data==null || data.length==0){
let targetDt = value.split("-").join("");
let url = address + queryString + targetDt;
getData(url).then((json)=>{
setData(json);
});
}
});
const handleChange = (e) => {
setValue(e.target.value);
let targetDt = e.target.value.split("-").join("");
let url = address + queryString + targetDt;
getData(url).then((json)=>{
setData(json);
});
}
return (
<div>
<h2>박스오피스 날짜 선택 : <input type="date" value={value} style={{ fontSize: '18pt' }} onChange={handleChange} /> </h2>
<hr />
{/* data && data.map() : data가 존재할때만 반복해라 */}
{
data &&
data.map((item, index) => {
return <Item item={item} key={index} />
})
}
</div>
);
}
createRoot(document.querySelector('#app')).render(<App />);
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
cs |
실행 결과는 동일 합니다.
뭔가 코드가 길어졌으며 많은 내용들이 추가 되었습니다.
그래서 React를 정확하게 제대로 사용하려면 HTML만으로는 구성하기가 힘듭니다.
지금까지는 그냥 React를 구경만 한것이고 다음부터는 제대로 배워보도록 하겠습니다.
제대로 배우기 위해서는 javaScript ES6의 기능을 숙지하셔야 하며 브라우져에서 지원하지 않는 기능들을 사용하여 프로그램을 작성할 것입니다.
브라우져가 지원하지 않는 기능들을 사용했으므로 babel이라는 것을 이용하여 개발이 모두 끝난 후에는 모든 브라우져가 지원가능하도록 빌드라는 작업을 수행한 후 배포작업을 하게됩니다.
차례차례 배워 보도록 하겠습니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 14] 수동으로 React Application 작성하기 (0) | 2024.10.16 |
|---|---|
| [React Exam 13] create-react-app를 이용한 Application 작성하기 (0) | 2024.10.15 |
| [React Exam 11] HTML로 시작해보는 React 보너스(천자문 보기 2) (0) | 2024.10.15 |
| [React Exam 10] HTML로 시작해보는 React 보너스(천자문 보기) (0) | 2024.10.15 |
| [React Exam 09] HTML로 시작해보는 React Component 속성 (1) | 2024.10.15 |
