Ref Hooks
Ref Hooks
React 컴포넌트는 렌더링에 사용되지 않는 일부 데이터를 가지고 있을 수 있으며, 이러한 데이터를 저장하기 위해서 ref를 사용합니다. ref는 state와는 달리 해당 값이 업데이트되도 컴포넌트가 리렌더링되지 않습니다.
useRef Hook은 함수 컴포넌트에서 이러한 ref를 참조할 수 있게 해 줍니다.
useRef Hook
useRef는 ref를 활용하여 특정 DOM 노드를 선택하거나 컴포넌트 내의 변수를 관리할 수 있도록 해 줍니다.
useRef 문법
const ref = useRef(initialValue)
useRef는 인수로 전달된 값(initialValue)으로 초기화 된 변경 가능한 ref 객체를 반환하며, 이 객체는 컴포넌트의 전 생명 주기 동안 유지됩니다. ref 객체는 current라는 프로퍼티 하나만을 가지고 있으며, 이 current 값이 실제 엘리먼트를 가리키게 됩니다.
다음 예제는 useRef를 사용하여 동영상의 재생 여부를 저장하고 이를 유지하는 예제입니다.
예제(App.js)
import { useState, useRef } from "react";
import video from "./flower.mp4";
const VideoPlayer = () => {
// false를 초기값으로 하는 state 생성
const [isPlaying, setIsPlaying] = useState(false);
// null을 초기값으로 하는 ref 객체 생성
const ref = useRef(null);
const handleClick = () => {
// ref.current를 사용하여
// 동영상이 재생 중이면 버튼의 동작을 pause로 설정하고,
// 정지 중이면 버튼의 동작을 play로 설정함
if (isPlaying) {
ref.current.pause();
} else {
ref.current.play();
}
setIsPlaying(!isPlaying);
};
return (
<>
<video
width="240"
ref={ref}
onPlay={() => setIsPlaying(true)}
onPause={() => setIsPlaying(false)}
>
<source src={video} type="video/mp4" />
</video>
<br />
<button onClick={handleClick}>{isPlaying ? "Pause" : "Play"}</button>
</>
);
};
export default VideoPlayer;
useRef를 사용하여 생성한 ref객체를 JSX 노드의 ref 속성으로 전달하면, React는 전달 받은 ref 객체를 해당 노드의 current 프로퍼티를 설정할 것입니다. 즉, 다음 렌더링 시에도 useRef는 동일한 ref 객체를 반환하게 되는 것입니다.
이처럼 ref 객체는 current 프로퍼티에 의해 변경할 수 있고 어떤 값이든 저장할 수 있는 일반 컨테이너라고 생각하면 됩니다.
