– prerequisite

+ 자바스크립트는 싱글 쓰레드이다.

+ setInterval()

Stopwatch 화면구성

Header 컴포넌트에 Stopwatch 컴포넌트를 추가한다.

전체 logic 구성

DOM이 렌더링 된 직후에 호출되는 componentDidMount 라이프 사이클 메서드와 DOM이 파괴직전 호출되는 componentWillUnmount 라이프 사이클 메서드에 리소스 할당 해제하는 코드를 추가한다.

start stop 토글 버튼 – 조건부 렌더링

시간에 따라 변하는 변수인 isRunning 변수를 추가하고 stop start 토글 버튼을 구현한다.

isRunning 변수에 따라서 Stop 버튼 혹은 Start 버튼이 나타나는데 이것을 conditional rendering 이라고 한다.

컨디셔널 렌더링은 뷰에서는 v-if 앵규러에서는 ng-if 라는 별도의 템플릿이 있는 만큼 굉장히 많이 사용되는 문법이다.

timer logic

tick 함수에 isRunning 상태에 따라 1초를 더하는 로직을 추가한다.

reset 로직

리셋 버튼은 단순히 timer를 0으로 초기화하면 된다.

lifecycle 종료시

해당 컴포넌트가 종료시 setInterval로 생성한 id를 초기화한다.

-note

+ conditional rendering

+ adding Lifecycle Methods to a Class

– quiz