• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    미해결

리랜더링과 useEffect의 상관관계가 궁금합니다

23.06.10 11:35 작성 조회수 173

1

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

function VideoPlayer({ src, isPlaying }) {
  const ref = useRef(null);

  useEffect(() => {
    if (isPlaying) {
      ref.current.play();
    } else {
      ref.current.pause();
    }
  });

  return <video ref={ref} src={src} loop playsInline />;
}

export default function App() {
  const [isPlaying, setIsPlaying] = useState(false);
  return (
    <>
      <button onClick={() => setIsPlaying(!isPlaying)}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
      <VideoPlayer
        isPlaying={isPlaying}
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
      />
    </>
  );
}

위의 코드는 링크에 있는 리액트 공식 문서에 있는 코드입니다

https://react.dev/learn/synchronizing-with-effects

useEffect에서 배열을 생략하면 맨처음에 실행되고 그이후는 리랜더링 될때마다 실행된다는데 이번 강좌에서 리액트는 변경하는 props와 state만 리랜더링한다고 하셨습니다 그럼 useEffect를 배열없이 사용하면 연결된 모든 자식 혹은 부모 컴포넌트에서 리랜더링되는 props와 state가 발견이 되면 useEffect가 작동되는 건가요?

답변 1

답변을 작성해보세요.

0

네 맞습니다. props state 변경 시, 부모컴포넌트 리렌더링 시 useEffect가 실행됩니다.