useRef (2) 썸네일형 리스트형 (component) React 타이머 시작, 일시정지/재개, 초기화 자바스크립트 내장함수 setInterval과 clearInterval 그리고 react 의 useState와 useRef로 Timer 를 구현해보았습니다. 전체 코드 보기 http://bit.ly/3Q7to69 요구사항 1. seconds를 입력할 때 60초를 넘겨서 입력하면 초과한 초를 제외한 나머지는 분(minutes)으로 합산된 상태로 타이머가 작동되어야 합니다. 2. 일시정지(PAUSE)와 재개(RESUME) 동작 기능이 있습니다. 배경지식 1. setInterval과 clearInterval 활용방법 특정함수를 1초 간격(1000m/s, milliseconds, 밀리세컨즈)으로 반복해서 실행시킬 때 seInterval 함수를 이용합니다. setInterval 함수는 'interval ID'를 리.. (React) useRef : 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안되는 값을 다룰 때 사용 useRef 유스 케이스 1. 변수 관리 : 렌더링과는 무관하게 변수를 관리해야 하는 경우 const initailValue = useRef(0) //useRef는 current 객체를 가진다. console.log(initail.current) useRef는 객체이고 current라는 키에 useRef의 값을 담고 있다. let, const 키워드로 선언된 값은 컴포넌트가 렌더링되면 초기값으로 변하게 된다. 컴포넌트의 생명주기와는 무관하게 관리되어야 할 값들이 let, const에 담기게 된다면 렌더링이 발생하는 순간 그 값들은 초기값으로 변하게 되어 누적 관리된 값들이 사라지게 된다. 이런 문제를 방지하기 위해 useRef를 사용하면 렌더링과는 무관하게 변수를 관리할 수 있다. 2. DOM 접근 : .. 이전 1 다음
