목표:
- 렌더링 되는 시점부터 소요된 시간을 측정하여 보여주는 타이머 구현
현재 단계:
- 리액트 문서에 나온 딱 이 예제처럼 setInterval로 해당 텍스트 노드만 업데이트가 되는 상태
- 부모 컴포넌트에서 조건부 렌더링을 한 다음, 자식 컴포넌트인 Timer 컴포넌트에서 : 마운트 한 시점의 시간 - 매 초 시간을 빼준 값을 출력하기. 언마운트 할 때, 해당 함수 해제
- 여전히 문제는 그 매 초 시간을 어떻게 얻을 것인지?
문제점:
- setInterval의 불안정성, 부정확성
- 잦은 setState -> 리렌더링
궁금한 사항:
- 화면의 텍스트가 매초 변경되어야 할 때, 리렌더링은 필수적인가?
- setInterval이 아닌 방식으로 매초 호출할 방법은 없는가?
해결 방법:
- setInterval을 대체할 무언가
- moment js의 활용
- DOM을 직접 조작하는 것은? (리액트 쓰는 이유가 사라짐)
- 리액트 ref의 활용 ?
댓글