타이머와 스톱워치

useEffect 에서 타이머를 걸고 정리 함수로 치우는 패턴을 손에 익히려고 만든 연습이다. 원본은 App.jsx 하나를 바꿔 가며 실행했는데, 여기서는 네 가지를 한 화면에 나란히 둔다.

1. 타이머 한 개 (App.jsx): 초를 입력하고 시작하면 setInterval 로 1초씩 줄어든다. isStart 가 바뀔 때마다 정리 함수가 이전 인터벌을 지운다.
2. 타이머 목록 (App.refactoring.jsx, components/Timer.jsx): 상태를 객체 하나로 묶고 공부용·요리용·게임용 타이머를 목록으로 그린다. 일시정지와 다시시작이 있다. 상태 객체를 JSON.stringify 로 그대로 보여 준다.
3. 10초 카운트다운 (simpleTimer.jsx): 가장 짧은 꼴. 0 이 되면 인터벌을 스스로 지운다.
4. 스톱워치 (stopwatch.jsx): setInterval 대신 requestAnimationFrame 으로 밀리초까지 센다.

원본 파일에는 빌드 설정이 없어서 Vite 뼈대와 main.jsx 를 붙였고, simpleTimer.jsx 에 빠져 있던 export default 한 줄을 더했다. 그 밖의 코드는 그대로다.