바로 시계 만들기!
- 내가 원하는 건 바로 째깍 째깍 자동으로 시간이 리셋되는 시계를 만드는 것이다.
- js를 사용하면 쉽게 만들 수 있지만 우리는 HOOKS를 사용해 만들어보자!
- 사용한 hook은 useState와 useEffect를 사용하여 만든 시계입니다!
- 기존에 설정했던 조건에 맞게 시간이 자동으로 돌아가게 만들었습니다.
- useState를 사용하여 new Date()함수를 지정했고 useEffect 첫번쨰 인자를 사용하여 setTime에 새로운 시간을 할당해줍니다.
- 시간은 1초마다 진행되므로 두번째 인자값에 1000ms를 삽입하여 1초마다 new Date()함수가 실행되고 매초 새로운 인자값이 setTime에 할당되므로 uesEffect는 계속 반복됩니다.
- 더 쉬운 방법이 있을수 있으나 저는 toLocaleTimeString()를 사용하여 시,분,초를 불러왔고 substring()함수를 사용하여 각각의 값을 뽑아내어 사용했습니다.
- 더 쉬운 방법이 있다면 댓글로 알려주시면 감사하겠습니다!!
결과값은!
짜잔 완성!
쉬운 방법과 알려주고 싶은 점 지적할 점이 있다면 댓글로 알려주세요!!
항상 발전하는 사람이 되겠습니다. 감사합니다!
728x90
'REACT' 카테고리의 다른 글
| React Hooks 6.useCallback (0) | 2022.11.21 |
|---|---|
| React Hooks 5.useMemo (0) | 2022.11.21 |
| React Hooks 4.useContext (0) | 2022.11.20 |
| React Hooks 3.useRef (0) | 2022.11.19 |
| React Hooks 2.useEffect (0) | 2022.11.17 |