[React 19] useRef

`useRef` 훅은 렌더링에 필요하지 않은 값을 참조하게 해주는 훅이다.

 

useRef는 초기값을 넣어주어야 하는데, 이는 참조할 객체의 속성을 선언하는 것이다. 이니셜 렌더링 후에는 무시된다.

 

import { useRef } from 'react';

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

 

이 훅은 `current`를 리턴하는데, 처음에는 선언 당시에 전달한 초기값이고, 나중에 다른 값으로 설정할 수 있다.

참조하는 객체를 JSX 노드에 ref attribute로 React에 전달하면 React는 current 프로퍼티로 설정해준다.

 

import { useRef } from "react";

export default function Counter() {
  let ref = useRef(0);

  function handleClick() {
    ref.current = ref.current + 1;
    alert(`${ref.current}번 클릭하였습니다.`);
 }

  return (
    <button onClick={handleClick}>
      Click me!
    </button>
  );
}

 

이 코드는 `useRef`의 초기값으로 0을 선언하고, 버튼을 클릭할 때마다 `ref.current`에 직접 1을 더해서 그 값을 저장한다.

 

import { useRef } from "react";

function MyComponent() {
  const inputRef = useRef(null);
  // ...
  return <input type="file" ref={inputRef} />
}

 

이렇게 DOM에 직접 전달할 수도 있는데, 이러한 경우 DOM을 직접 컨트롤할 수 있다.

 

import { useRef } from "react";

export default function Form() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.click();
  }

  return (
    <>
      <input type="file" ref={inputRef} />
      <button onClick={handleClick}>
        Attach File
      </button>
    </>
  );
}

 

`handleClick` 함수는 `inputRef`의 `current`를 받아서 클릭하게 한다. 그러면 파일을 첨부하는 윈도우가 나타난다.

 

타입스크립트를 사용하는 경우 처음에 `null`로 선언하였기 때문에 `null-safety(?)`를 적용해 주어야 한다.