import { useRef, useState } from "react";
export default function Ref() {
const ref = useRef(0);
const [state, setState] = useState(0);
function handleClick() {
ref.current = ref.current + 1;
alert("You clicked " + ref.current + " times!");
}
function handleClickState() {
setState(state + 1);
alert("You clicked " + state + " times!");
}
return (
<>
<button onClick={handleClick}>Click me!</button>
<button onClick={handleClickState}>State Click me!</button>
</>
);
}
import { useRef } from 'react';
function MyComponent() {
const inputRef = useRef(null);
// ...
// ...
return <input ref={inputRef} />;
만약 이런 식으로 선언을 한다면 초기 렌더링 시에만 선언되는 것이 아닌 매번 렌더링이 될 때마다 새롭게 불러오게 된다. → 낭비가 된다
function Video() {
const playerRef = useRef(new VideoPlayer());
// ...
이를 해결하기 위해 보통 초기 상태를 null로 선언한다
function Video() {
const playerRef = useRef(null);
if (playerRef.current === null) {
playerRef.current = new VideoPlayer();
}
// ...