useRef

• 공식문서의 설명에 따르면 렌더링이 필요 없을때 사용하는 훅이라고 정의되어 있다.
• initialValue에는 current 속성에 들어갈 초기 값을 선언해주면 된다. 이 argument는 첫 렌더링 이후 무시된다.

useState와 차이

• 간단히 말하면 useState는 렌더링을 원할 때 useRef는 렌더링을 원하지 않을때 사용한다고 볼 수 있다.
• 다음과 같은 경우이다.
• React 공식 문서에 있는 예제에 state를 클릭 했을때 어떻게 되는지 비교하기 위해 코드를 추가했다.
• alert 창을 닫을 때 useRef를 이용하면 컴포넌트가 렌더링 되지 않고
• useState를 이용하면 컴포넌트가 다시 렌더링 된다.

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>
    </>
  );
}

DOM 요소 조작

• 처음 선언을 null로 해준다.

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);
  // ...

• 그리고 가져오고 싶은 DOM 요소에 다음과 같이 적어준다

// ...
  return <input ref={inputRef} />;

• DOM 요소를 조작하기 위해 선언할 때 초기 값을 null로 주는게 좋은 이유

  • 만약 이런 식으로 선언을 한다면 초기 렌더링 시에만 선언되는 것이 아닌 매번 렌더링이 될 때마다 새롭게 불러오게 된다. → 낭비가 된다

    function Video() {
      const playerRef = useRef(new VideoPlayer());
      // ...
    

  • 이를 해결하기 위해 보통 초기 상태를 null로 선언한다

    function Video() {
      const playerRef = useRef(null);
      if (playerRef.current === null) {
        playerRef.current = new VideoPlayer();
      }
      // ...