바닐라 스크립트를 이용한 시계만들기
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순수 자바스크립트인 바닐라 JS 시계</title>
<script>dayjs.locale('ko')</script>
<style>
#clock1, #clock2, #clock3 {
border: 1px double gray;
width : 280px;
text-align: center;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<div id="clock1"></div>
<script>
let clock1 = document.querySelector("#clock1");
clock1.innerHTML = '서울 : ' + dayjs().format('YYYY-MM-DD(dd) A hh:mm:ss');
setInterval(()=>{
clock1.innerHTML = '서울 : ' + dayjs().format('YYYY-MM-DD(dd) A hh:mm:ss');
}, 1000);
</script>
<div id="clock2"></div>
<script>
let clock2 = document.querySelector("#clock2");
clock2.innerHTML = '뉴욕 : ' + dayjs().subtract(14, 'hour').format('YYYY-MM-DD(dd) A hh:mm:ss');
setInterval(()=>{
clock2.innerHTML = '뉴욕 : ' + dayjs().subtract(14, 'hour').format('YYYY-MM-DD(dd) A hh:mm:ss');
}, 1000);
</script>
<div id="clock3"></div>
<script>
let clock3 = document.querySelector("#clock3");
clock3.innerHTML = '파리 : ' + dayjs().subtract(8, 'hour').format('YYYY-MM-DD(dd) A hh:mm:ss');
setInterval(()=>{
clock3.innerHTML = '파리 : ' + dayjs().subtract(8, 'hour').format('YYYY-MM-DD(dd) A hh:mm:ss');
}, 1000);
</script>
</body>
</html>
|
또 동일한 코드가 많이 나온다. 여전히 추가하면 코드가 길어 진다.
이번에는 리액트로 만들어 보자!!
Clock.js 파일을 만들자
|
import { useEffect, useState } from 'react';
import './Clock.css'
import dayjs from 'dayjs';
import 'dayjs/locale/ko'; // 한국어 가져오기
dayjs.locale('ko'); // 언어 등록
const Clock = ({area='서울', hour=0}) => {
const [now, setNow] = useState(dayjs().format('YYYY-MM-DD(dd) A hh:mm:ss'));
useEffect(() => {
const interval = setInterval(() => {
let time = dayjs().format('YYYY-MM-DD(dd) A hh:mm:ss');
if(hour>0) time = dayjs().add(hour, 'hour').format('YYYY-MM-DD(dd) A hh:mm:ss');
if(hour<0) time = dayjs().subtract(hour*-1, 'hour').format('YYYY-MM-DD(dd) A hh:mm:ss');
setNow(time)
}, 1000);
return () => {
clearInterval(interval);
};
}, [now, hour]);
return (
<div className='clock'>
{area} : {now}
</div>
);
}
export default Clock;
|
App.js 파일을 만들자
|
import Counter from "./Counter";
const App = ()=>{
return (
<>
<Clock/>
<Clock area='뉴욕' hour={-14}/>
<Clock area='파리' hour={-8}/>
</>
);
}
export default App;
|
index.js 파일을 만들자
|
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
|
실행 결과 입니다.
이번에는 useEffect Hook을 사용하였습니다.
useEffect(() => { // 매 렌더링마다 실행됩니다. return ()=>{ // CleanUp : 특정 작업의 경우에는 메모리 누스 등의 문제를 해결하기 위한 방법이 필요합니다. // setInterval이나 setTimeout 등과 같은 이벤트는 등록 후 제거하기 등 }; }); useEffect(() => { // 컴포넌트가 처음 렌더링될 때만 실행됩니다. return ()=>{ // CleanUp }; }, []); useEffect(() => { // 컴포넌트가 처음 렌더링될 때 실행됩니다. // a나 b가 변경되어 컴포넌트가 재렌더링된 이후 실행됩니다. return ()=>{ // CleanUp }; }, [a, b]); |
리액트를 정확하게 사용하려면 Hook을 사용할 줄 알아야 합니다.
다음에는 Hook에 대하여 자세하게 알아보도록 하겠습니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 38] 로또 번호 자동 생성기 만들기 2 (0) | 2024.11.05 |
|---|---|
| [React Exam 37] 로또 번호 자동 생성기 만들기 (0) | 2024.11.04 |
| [React Exam 35] Counter 만들어보기 (1) | 2024.11.04 |
| [React Exam 34] map()을 이용한 10간(十干)/ 12지(十二支) 나열하기 (0) | 2024.11.01 |
| [React Exam 33] map()을 이용한 3.1 혁명 민족 대표 보기 (3) | 2024.11.01 |
