- 요구하는 최소 컴포넌트 2개
App.jsx
,Clock.jsx
- 시계 표시 기능
- 현재 시간을 시:분:초 형식으로 표시
- 시간 표시가 1초 간격으로 실시간 업데이트
- 각 숫자를 개별적으로 스타일링할 수 있도록 시간 문자열 분리
- 타이머 실행/정지 토글 기능
- 명확하게 구분되는 토글 버튼 구현
- 버튼 텍스트는 상태에 따라 변경 (
"타이머 정지" / "타이머 시작"
) - 버튼 스타일또한 상태에 따라 차별화 (
다른 색상 적용
) - 타이머가 정지 상태일 때는 시간 업데이트가 중단되어야 합니다.
- 타이머가 다시 시작되면 현재 시간부터 다시 업데이트
- 타이머 로직
setInterval
을 사용하여 1초마다 시간 업데이트- 컴포넌트가 언마운트되거나 타이머가 정지될 때
clearInterval
로 타이머 클린 useEffect
훅을 사용하여 타이머 상태 관리
- 타이머가 갱신될 때, **
App.jsx
**가 리렌더링 되어서는 안됩니다. - 스타일은 제공되지 않으며, 자유롭게 구현할 수 있습니다.