Skip to content
Snippets Groups Projects
Commit b216e374 authored by LeeJaeYoung's avatar LeeJaeYoung
Browse files

Merge branch 'new' into 'master'

New

See merge request !1
parents 7cba7f50 914a6ab1
No related branches found
No related tags found
1 merge request!1New
Pipeline #7620 passed
import React, { useState, useEffect, useMemo } from 'react';
const cityList = [
{ cityName: 'LA', timezone: 'America/Los_Angeles' },
{ cityName: 'Tokyo', timezone: 'Asia/Tokyo' },
{ cityName: 'Campinas', timezone: 'America/Sao_Paulo'}
];
const TimeButton = ({ cityName, timezone }) => {
const [showTime, setShowTime] = useState(false); //토글
const [currentTime, setCurrentTime] = useState(new Date());
useEffect(() => {
const timer = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
return () => {
clearInterval(timer);
};
}, []);
const handleButtonClick = () => {
setShowTime(!showTime);
};
const localTime = useMemo(() => {
const option = {
timeZone: timezone,
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
};
return currentTime.toLocaleTimeString('ko-KR', option);
}, [currentTime, timezone]);
return (
<>
<div>
<button onClick={handleButtonClick}>
{cityName}
</button>
</div>
{showTime && <>{localTime}</>}
</>
);
};
const App = () => {
return (
<>
{cityList.map((city) => (
<TimeButton
key={city.cityName}
cityName={city.cityName}
timezone={city.timezone}
/>
))}
</>
);
};
export default App;
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
var container = document.getElementById('root');
var root = ReactDOM.createRoot(container);
root.render(<App />);
module.hot.accept()
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment