예시 프로젝트 진행 (2)

학습 목표

이 영상은 타이머 컴포넌트의 상태 관리와 이벤트 처리에 대한 심층적인 이해를 돕습니다. useState, useRef, useEffect 훅을 활용하여 타이머의 시작, 일시정지, 초기화 기능을 구현하고, UI 요소의 동적인 변경 및 브라우저 타이틀 업데이트까지 다룹니다. 특히, React의 함수형 컴포넌트에서 복잡한 상태 변화를 효과적으로 관리하는 방법을 배울 수 있습니다.

핵심 개념

• 상태 관리 (useState): 타이머의 실행 여부(isRunning), 남은 시간(secondsLeft), 세션 기록(sessions) 등 컴포넌트의 상태를 관리합니다.
• 참조 관리 (useRef): 렌더링과 무관하게 값을 유지해야 하는 시작 시간(startTimeRef)이나 인터벌 ID(intervalRef) 등을 저장하는 데 사용됩니다. useState와 달리 값 변경 시 리렌더링을 유발하지 않습니다.
• 부수 효과 관리 (useEffect): 타이머 인터벌 설정 및 해제, 브라우저 타이틀 업데이트 등 컴포넌트 렌더링 이후에 발생하는 부수 효과를 처리합니다. 의존성 배열을 통해 특정 상태 변화 시에만 실행되도록 제어합니다.
• 이벤트 처리: 버튼 클릭(onClick) 시 발생하는 이벤트 핸들러(handleToggle, handleReset)를 통해 상태를 변경하고 타이머 로직을 실행합니다.
• 컴포넌트 통신: props를 통해 부모 컴포넌트에서 자식 컴포넌트로 함수와 상태를 전달하여 상태를 공유하고 이벤트를 트리거합니다.
• UI 동적 변경: isRunning 상태에 따라 버튼 텍스트, 색상, 입력 필드 활성화/비활성화, 브라우저 타이틀 등이 동적으로 변경됩니다.

// 예시: 타이머 인터벌 설정 및 클린업
useEffect(() => {
  if (isRunning && secondsLeft > 0) {
    const intervalId = setInterval(() => {
      setSecondsLeft(prevSeconds => prevSeconds - 1);
    }, 1000);
    return () => clearInterval(intervalId); // 클린업 함수
  }
}, [isRunning, secondsLeft]);

공부 방향성

이 영상을 시청하기 전에 React의 기본 훅(useState, useEffect)에 대한 이해가 있으면 좋습니다. 영상에서는 타이머 로직 구현뿐만 아니라, 복잡한 상태 변화가 연쇄적으로 일어날 때 발생하는 문제점과 이를 해결하는 방법에 대해서도 다룹니다. 특히 useEffect의 클린업 함수 활용과 의존성 배열 관리에 집중하여 학습하면, React 애플리케이션의 안정성과 성능을 높이는 데 큰 도움이 될 것입니다. 다음 단계로는 이 타이머 기능을 실제 프로젝트에 통합하거나, 알림 기능 등을 추가하는 연습을 해볼 수 있습니다.