Udemy React 강의 141번 정리
문제 상황
setTimeout()은 한 번만 실행됨 → 경과 시간 추적 불가- 목표 :
- 시간이 지속적으로 얼마나 남았는지 추적- 시간이 끝나면 자동으로 모달 열기
- 사용자가 중간에 STOP 눌러도 멈추기
- 성공과 실패를 구분하여 표시
그래서 setTimeout 대신 setInterval을 사용하여 계속 시간 감소시키는 방식 필요
setInterval vs setTimeout 차이
| 기능 | setTimeout | setInterval |
|---|---|---|
| 실행 방식 | 일정 시간 후 1회 실행 | 일정 시간마다 반복 실행 |
| 경과 시간 추적 | 불가능 | 가능 |
| 타이머 종료 시 별도 처리 | 필요 없음 | 직접 clearInterval 해야 함 |
왜 ref로 interval ID를 저장해야 할까?
| 저장 방식 | 문제점 |
|---|---|
| let timer 일반 변수 | 리렌더링 때 사라짐 or 컴포넌트 인스턴스 공유됨 |
| state | state 변경 → 리렌더링 발생 → 오히려 timer 초기화 문제 |
| ref | 값 유지 + UI 업데이트 없음 + 컴포넌트마다 독립 |
핵심 : UI와 상관없는 값이지만 컴포넌트가 재실행되어도 유지되어야 하는 값 → ref에 저장!
setInterval + ref + state 조합이 필요한 이유
| 역할 | 담당 | 설명 |
|---|---|---|
| state (timeRemaining) | 화면 업데이트 | 화면에 남은 시간을 보여주기 위해 필요 |
| ref (intervalId) | 반복 실행 제어 | 더 이상 실행되면 안 되므로 중단 시 필요 |
| state vs ref | 영향도 | state는 UI 렌더링, ref는 내부 값 저장 |
즉, UI에 반영되는 값(남은 시간)은 state, UI와 무관한 실행 상태(interval ID)는 ref.
성공 / 실패 처리 흐름
실패 → [조건] timeReamining <= 0 → "You lost!"
성공 → [조건] STOP 버튼 클릭 → "You win!"
둘다 동일하게 dialog.current.open() 호출.
즉, 내부 dialog가 어떻게 구현되었는지 TimerChallenge는 몰라도 됨. open이라는 컴포넌트 API만 호출하면 됨.
이 강의의 핵심 요약
setInterval로 남은 시간을 지속적으로 추적해야 하는 경우, ref와 state는 서로 다른 목적을 가진다.
state는 UI를 업데이트하기 위한 값이며, ref는 UI와 무관하지만 유지되어야 하는 데이터를 저장하는 데 적합하다.
React 컴포넌트에서 UI 반영 여부가 ref와 state를 구분하는 기준이다.
