Skip to content

OZ-Coding-School/oz_react_deepening_07_answer

Repository files navigation

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

주의사항

  • 타이머가 갱신될 때, **App.jsx**가 리렌더링 되어서는 안됩니다.
  • 스타일은 제공되지 않으며, 자유롭게 구현할 수 있습니다.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •