javascript로 만드는 경우
<!DOCTYPE html>
<html lang="en">
<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>javascript</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
function clock(){
const div = document.createElement('div')
const h1 = document.createElement('h1')
const h2 = document.createElement('h2')
let txt = 'hello world'
let timetxt = `it is ${new Date().toLocaleTimeString()}`
h1.innerHTML = txt
h2.innerHTML = timetxt
div.appendChild(h1)
div.appendChild(h2)
document.querySelector('#root').innerHTML = div.innerHTML
}
setInterval(clock,1000)// 1초마다 1씩 증가
</script>
</body>
</html>react로 만드는 경우
<!DOCTYPE html>
<html lang="en">
<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>react</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- react사용을 위해 반드시 필요한 것 -->
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!-- 기본적으로 react사용시에는 아래와 같이 div id="root" 이렇게 만들어주고 -->
<div id="root"></div>
//이부분 무슨 의미인지 이해가지 않음 물어볼 것================================================= -->
<script type="text/babel">
class Clock extends React.Component{
constructor(props){
super(props)
this.state={
currentTime:new Date().toLocaleTimeString(),
}
}
render(){
// 함수의 선언은 return하기 전의 공간에.
setInterval(()=>{
this.setState({currentTime:new Date().toLocaleTimeString(),})
},1000)
// 1초마다 currentTime을 변경하여 줌
return(
<div>
<h1>helloworld</h1>
<h2>It is {this.state.currentTime}</h2>
</div>
)
}
}
ReactDOM.render(
//전체가 아닌 해당하는 부분만 변화가 나타나도록
<Clock/>,
document.querySelector('#root')
)
</script>
</body>
</html>
안녕하세요