assignment-07: 한슬희 #3
Conversation
| () => setTextState("정보가 확인됐어요 :D"), | ||
| 8000 | ||
| ); | ||
| return () => clearTimeout(timeout); |
| if (clock) { | ||
| clock.innerText = `${currentHour} : ${currentMinutes} : ${currentSecond}`; | ||
| } | ||
| setInterval(Clock); |
There was a problem hiding this comment.
이렇게 지정해주시면, 계속 실행되는 시간인 delay시간이 0으로 설정돼요!
https://developer.mozilla.org/en-US/docs/Web/API/setInterval#parameters
추가적으로 현재 인터벌을 통해 매번 컴포넌트를 다시 렌더링하고 있는데, 이런 패턴은 불필요한 실행까지 있을 수 있는 안티패턴으로 보여요!
인터벌을 이용해 setState하는 방향으로 수정해보시면 좋을 거 같아요~ 👍 👍 👍 👍 👍 👍
There was a problem hiding this comment.
아 추가적으로 interval도 timeout처럼 clear하실 수 있으니 그런 방향으로 해보시면 좋을 거 같아요 ~!
| @@ -0,0 +1,21 @@ | |||
| function Clock() { | |||
| const clock = document.querySelector<HTMLSpanElement>(".clock"); | |||
There was a problem hiding this comment.
리액트에서 쿼리 셀렉터를 사용하는 것은 지양하시는 것이 좋아요!
그 대신 ref에 대해 공부해보시면 좋을 거 같아요 ~~~! 👍 👍
| const currentMinutes = String(currentTime.getMinutes()).padStart(2, "0"); | ||
| const currentSecond = String(currentTime.getSeconds()).padStart(2, "0"); |
There was a problem hiding this comment.
그냥 getMinutes, getSeconds를 사용하시지 않고, padStart를 사용하신 이유가 있을까요???
궁금해요 ~~~~ 👍 👍 👍
There was a problem hiding this comment.
분이나 초가 한자릿수일 경우 앞에 0을 붙이기 위해 사용하였습니당
There was a problem hiding this comment.
허걱 그런 이유가 ~~~~ 👍 👍 👍
여기에서 추가적으로 함수로 빼서 관리할 수도 있을 거 같네요 고럼!!! 👍 👍
주소: https://p3y5qt.csb.app/