개인 공부/타이머5 COMPLETE TIMER 타이머 기능 최종 완성본 component -Button.jsx -Input.jsx page -Timer.jsx css -Timer.css App.js component - import React from 'react' function Input({className, type, value, onChange, placeholder}) { return ( ) } export default Input component - import React from 'react' function Button({type, className, name, onClick}) { return ( {name} ) } export default Button page - import React, {useCallback, useEffec.. 2024. 2. 7. 4. HOUR, STOP/RESTART, RESET ※시 추가 ※타이머 정지/재시작 추가 ※리셋 기능 추가 component -Button.jsx -Input.jsx page -Timer.jsx css -Timer.css page - Timer.jsx import React, {useCallback, useEffect, useState} from 'react' import '../css/Timer.css' import Input from '../component/Input' import Button from '../component/Button' function Timer() { const MAX_TIME = 59 const [timeOut, setTimeOut] = useState(true) const [startView, setStartView] = .. 2024. 2. 7. 3. Time Input ※Input 컴포넌트 추가 ※Start, Time out 화면 나타내기 ※분/초 입력해서 타이머 실행 ※최대 입력 숫자 59로 지정 component -Button.jsx -Input.jsx page -Timer.jsx css -Timer.css component - import React from 'react' function Input({className, type, value, onChange, placeholder}) { return ( ) } export default Input page - import React, {useCallback, useEffect, useState} from 'react' import '../css/Timer.css' import Button from '../comp.. 2024. 1. 26. 2. padStart, setTimeout ※00 : 00(분 : 초) 형식으로 업그레이드 -padStart 함수로 1 => 01 형식으로 변환 -setTimeout 함수로 함수 실행 잠시 지연 -타이머 리셋해서 다시 작동 component -Button.jsx page -Timer.jsx page - import React, {useCallback, useEffect, useState} from 'react' import Button from '../component/Button' function Timer() { const [timeOut, setTimeOut] = useState(true) const [second, setSecond] = useState(10) const [minuts, setMinuts] = useState(2) cons.. 2024. 1. 26. 이전 1 2 다음
