지금 리액트를 공부중이기때문에 이번에 외운 함수는 리액트로 시계만들기이다.
녹화하려고 여러번 반복하다보니 말할 수 있을 정도로 외웠다. 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>아직 짧은 코드만 외워서 그런지 코드 외우기보다 녹화가 더 어렵다🤣
반응형
'TIL' 카테고리의 다른 글
| 프로젝트 회고 1 :: 프론트엔드 프로젝트는 어떻게 해야하죠? (0) | 2022.06.30 |
|---|---|
| 냅다 함수 :: React로 투두리스트 만들기 (ft.preventDefault) (0) | 2022.06.29 |
| 냅다 외우기 :: [JS] 소수판별 (0) | 2022.06.20 |
| 발표 절대 못 한다던 내가 첫 연사를 마친 소감 (0) | 2022.06.09 |
| TIL 34 :: 캡처링? 버블링? (0) | 2022.05.17 |