TIL
냅다 함수 :: React로 시계 만들기
Deeb
2022. 6. 22. 23:56
지금 리액트를 공부중이기때문에 이번에 외운 함수는 리액트로 시계만들기이다.
녹화하려고 여러번 반복하다보니 말할 수 있을 정도로 외웠다. setInterval 두렵지 않아..!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="root"></div>
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// 현재 시간을 출력하는 컴포넌트
function Clock(props) {
return (
<div>
<h1>리액트로 시계 만들기</h1>
<h2>현재 시간: {new Date().toLocaleTimeString()}</h2>
</div>
)
}
// 컴포넌트를 root에 렌더링
setInterval ( () => {
ReactDOM.render (
<React.StrictMode>
<Clock/>
</React.StrictMode>,
document.getElementById("root")
)
}, 1000)
</script>
</body>
</html>아직 짧은 코드만 외워서 그런지 코드 외우기보다 녹화가 더 어렵다🤣
반응형