1관문. Synchronization, not Lifecycle

관문 1 / 7

비디오 재생 상태를 라이프사이클이 아닌 동기화 관점으로 Effect를 작성하라.

📖 이론 비급

동기화 관점의 Effect

"마운트 시 실행, 언마운트 시 정리"가 아니라 "isPlaying 상태에 비디오 DOM을 동기화한다"고 생각하라.

Effect의 목적은 외부 시스템을 리액트 상태와 동기화하는 것이다. 의존성 배열은 "언제 실행할지"가 아니라 "어떤 값이 변할 때 다시 동기화할지"를 선언한다.

⚔️ 수련 코드

import { useState, useEffect, useRef } from 'react';

export default function VideoPlayer({ isPlaying }) {
  const videoRef = useRef(null);

  useEffect(() => {
    // TODO: isPlaying 상태에 따라 video를 play/pause 동기화하라
    // 힌트: videoRef.current.play() / videoRef.current.pause()
  }, []);

  return (
    <video
      ref={videoRef}
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
      loop
    />
  );
}

Open Sandbox