▶︎ 메인페이지
- 실시간 시계구현
구현기능
- new Date( ), useState( ), useEffect( ), setInterval( )을 통해 시와 분이 바뀔 때마다 화면에 렌더되도록 구현
기존코드
MainLayout.js
const Main = () => {
const [min, setMin] = useState(0);
const [hour, setHour] = useState(0);
// 분, 시를 각각의 useState로 관리, 초기값을 0으로 설정
const getTime = () => {
const currentHour = new Date().toLocaleTimeString('en-US', {
hour12: false,
hour: '2-digit',
});
const currentMinute = new Date().toLocaleTimeString('en-US', {
minute: '2-digit',
});
// 분, 시를 new Date() 함수에서 가져와서 각 변수에 담았다
setHour(currentHour);
setMin(currentMinute);
// 분, 시가 바뀔때마다 상태값을 갱신할 때 쓰는 함수
};
useEffect(() => {
setInterval(getTime, 1000);
return () => {
setInterval(getTime, 1000);
};
}, []);
// useEffect로 해당 컴포넌트 주기 관리.
// setInterval함수를 통해 주기적으로 일정시간이 지나면 getTime() 함수가 실행되도록 했고, 중단하지 않기 때문에 clearInterval()은 사용하지 않았다.
return (
<>
<CurrentTime currentHour={hour} currentMinute={min} />
// 시간컴포넌트에 state로 넘겨주었다.
</>
);
};
export default Main;
CurrentTime.js
const CurrentTime = ({ currentHour, currentMinute }) => {
// 부모 MainLayout 컴포넌트에서 props로 받아왔다.
// { } 로쓰면 구조분해할당이 적용된다.
return (
<TimeBox>
<div>
<i className="fas fa-clock" />
{` ${currentHour}시 ${currentMinute}분`}
</div>
</TimeBox>
);
};항상 짜릿한 결과물🤩🤩
코드리뷰반영
mainLayout.js
const Main = () => {
const [time, setTime] = useState(0);
const getTime = () => {
const current = new Date().toLocaleTimeString('en-US', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
});
setTime(current);
};
useEffect(() => {
setInterval(getTime, 1000);
return () => {
setInterval(getTime, 1000);
};
}, []);
;
return (
<CurrentTime
hour={time.toLocaleString().split(':')[0]}
min={time.toLocaleString().split(':')[1]}
// console.log찍어보면 00:00 으로 나오기 때문에 ':' 기준으로 시간과 분을 나누어서 props 전달.
/>
);
};
export default Main;CurrentTime.js
const CurrentTime = ({ hour, min }) => {
return (
<TimeBox>
<div>
<i className="fas fa-clock" />
{` ${hour}시 ${min}분`}
</div>
</TimeBox>
);
};
export default CurrentTime;짜릿한 결과물 공유!
🙋🏻♀️ Today,
실시간을 화면에 렌더링하는 것이 어렵다고 해서 추가구현으로 남겨두었던 시계구현하는 방법.
정말로 할 수 있을 줄 몰랐는데 구글링을 하다보니 되었다.
처음에 시계를 구현하려고 구글링 했을 때는 대부분이 moment라이브러리에 대한 글이 많았고, 해당 라이브러리를 쓸까하다가 new date() 함수가 생각나서 함수를 적용해봤다.
리디북스에서는 시계가 00시00분으로 표기가 되기때문에 string이 포함되어야 해서 시간, 분을 각 변수에 담았다.
부모 컴포넌트에서는 통으로 실시간을 렌더할 수 있게 조정하고, 자식 컴포넌트에서는 해당 시간,분만 가져오는 방법도 있었다.
어느 것이 맞다고 할 수 없지만 다양한 방법으로 구현할 수 있다는 또다른 재미가 있었다.!
프로젝트 완료되면 혼자서 한번 다른방법으로 적용해 볼 생각이다!
사실 굳이 바꾸지 않아도 되지만 혼자서 신경쓰였던 부분이 있었다.
10분 미만일 때 두자릿수가 되도록 하는 것이다.
기존 코드에서는 되는 줄 알았다.
왜냐면 분명히 toLocaleString() 속성값으로 minute:'2-digit'을 줬기 때문이다.
그런데 전혀 먹히지 않았다.
아무리 구글링을 해도 나와 같은 사람은 좀처럼 찾아 볼 수가 없었다.
그러다가 생각한 것이 그들과 나의 코드가 다른점을 찾는 것이었다.
00시00분
즉 string을 포함한 시간을 구현하기 위해서 시간과 분을 각 변수에 담아서 가져왔었다. 그런다음에 속성값을 주려고 하니 전혀 먹히지가 않는 것이다.
그래서 지난글에서 생각했던 것처럼 부모컴포넌트에서 1개의 변수와 함수에서 시간을 가져와서 props로 넘길 때, split하여 시간,분을 각각 전달해 주는 것이었다.
그랬더니 적용이 됐다.
결국 내가 구현하려고 하다보니 나중에 혼자 해보려고 했던 다른방법으로 구현하게 되었다.
이러나 저러나 결과적으로는 실시간 구현하는 방법들 중 하나가 되는 것을 알았다!!
내가 생각했던대로 결과가 나오면 너무나도 기분좋다.🥳🤩
