[react-youtube] videoId에 따라 영상이 변경되지 않을 때

react-youtube

react-youtube는 YouTube IFrame Player API를 리액트 컴포넌트로서 구현한 패키지이다. 사용법은 너무나 간단하니 공식 문서를 참고하자.

videoId가 바뀌어도 영상이 변경되지 않는다?

빠르게 유튜브 플레이어를 서비스에 포함시키고자 사용했는데, 몇 가지 이슈가 있었다. 그 중에 하나는 props로 내려받은 videoId에 따라 영상이 업데이트 되지 않는다는 거였다.

이해를 돕기 위해 공식 문서의 예제를 가져왔다. 여기서 우리는 videoId가 변경되면 Example 컴포넌트가 리렌더 되면서 영상이 변경될 것으로 예상할 수 있다. 하지만 영상이 변경되지 않았다!

import YouTube from 'react-youtube';

function Example({ videoId }) {
    return (
        <YouTube 
            videoId={videoId} 
            opts={{
              height: '390',
              width: '640',
              playerVars: {
                autoplay: 1,
              },
            }} 
        />
    );
}

key를 추가하자!

다른 패키지이지만 react-native-youtube-player의 이슈에서 해결법을 찾았다. Youtube 컴포넌트에 key 속성을 추가하면 업데이트가 잘 된다.

function Example({ videoId }) {
    return (
        <YouTube 
            key={videoId}
            videoId={videoId} 
            opts={{
              height: '390',
              width: '640',
              playerVars: {
                autoplay: 1,
              },
            }} 
        />
    );
}