타임바
사용배경
구글 캘린더에 기능 중 타임바를 구현하였다. 기능은 다음과 같다.
빨간색 타임바이다. 실제로 어떻게 작동하는지 개발자도구에서 확인해봤다.
top이 정확히 0초에 바뀐다. (매분 마다 1px 바뀜)
이것을 구현해 보자
구현
1. 처음 렌더링 되었을 때 타임바 위치시키기
설명하기 전에 알아야 할 내용이 있다.
1. 본 프로젝트에서 시간 간격은 100px이다.
2. 본 프로젝트에서는 일정이 8시부터 24시까지만 되어 있다.
그러면 1시간 100px가야하니 1초에는 몇 px을 가야할까?
=> 100 / 3600 = 0. 027777777777778px이다.
8시의 top은 50px이다. 만약 10시 25분 44초의 top은 몇 px일까?
일단 시간 차이를 계산해보자
10시 25분 44초 - 8시 => 2시간 25분 44초
2시간 25분 44초를 초단위로 나타내보자
2 x (3600) + 25 x (60) + 44 => 8744초이다.
top을 계산해보자
8744 * 0.0277777777778 => 242.88888888888889px + 50px이다.
즉 처음 렌더링 될 때 이러한 계산으로 타임바를 위치시키면 된다.
코드로 살펴보자
Date객체로 현재시간을 가져온다.
현재시간 - 8시 = 시간차이(단위 sec)
물론 시간차이가 음수일 수 도있다.
1. 현재시간이 8시보다 작을 경우 (0시~7시)
이때는 top을 0px로 한다.
그렇지 않을 경우
0.02777777778 * gap + 50px을 하여 top을 구한다. (여기서는 45px을 더했으나 추후에 5px을 추가로 더함)
useRef를 사용하여 직접 DOM객체의 top을 변경한다.
2. 매분 마다 타임바 위치시키기
처음 렌더링 되었을 때 시간 초가 16초일 수도 있고 49초 일 수도 있다. 바로 setInterval함수를 사용하는 것이 아니라 0초 일 때 setInterval함수를 사용하도록 로직을 구성해야 한다.
코드를 통해 알아보자.
일단 1초 단위로 시작하는 setInterval 함수를 구현한다. 이 함수에서 Date객체를 통해 현재 초를 가져오고 0초인지 확인을 한다. (매 초마다 확인함)
0초라면 해당 setInterval함수를 종료하고 매 분마다 실행하는 setInterval함수를 실행시킨다.
이 두 개의 차이점은 setInterval함수가 실행됬을 때 바로 moveTimer가 실행되지 않는다. 1분 뒤에 첫 moveTimer가 실행이 된다. 그래서 바로 moveTimer가 실행되도록 한다.
결과
useRef
useRef는 DOM 객체를 저장할 수 있다.
State변수로 관리할 필요 없이 직접 DOM객체에 접근하여 top을 바꾸면 알아서 렌더링이 된다.
