useRef

React의 useRef는 함수형 컴포넌트에서 레퍼런스를 생성하고 관리할 수 있는 훅(hook)이다.
useRef는 다음과 같은 주요 용도로 사용된다

Useref 사용

• DOM 엘리먼트에 접근하기:
  useRef를 사용하여 특정 DOM 엘리먼트에 직접 접근하고 조작할 수 있다.
• 값 저장하기:
  useRef는 상태(state)와는 다르게 리렌더링 없이 컴포넌트 내에서 값을 저장할 수 있다. 이는 주로 렌더링 사이에서 값을 유지하기 위해 사용된다.
  

예제

1.DOM 엘리먼트 접근 : 버튼을 클릭하면 입력 필드에 포커스를 주는 간단한 코드

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleButtonClick = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleButtonClick}>Focus the input</button>
    </div>
  );
}

export default FocusInput;

2. 값 저장하기 : 버튼을 클릭할 때마다 클릭 수를 저장

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

function ClickCounter() {
  const countRef = useRef(0);
  const [renderCount, setRenderCount] = useState(0);

  const handleClick = () => {
    countRef.current += 1;
    setRenderCount(renderCount + 1);
  };

  return (
    <div>
      <p>Button clicked {countRef.current} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default ClickCounter;

위 예제에서 countRef는 버튼 클릭 수를 저장하지만, 상태로 관리되지 않기 때문에 값이 변경되더라도 컴포넌트가 리렌더링되지 않는다는 특징이 있다.
이와 달리 renderCount는 상태로 관리되어 버튼을 클릭할 때마다 컴포넌트를 리렌더링하게 된다.

정리

useRef는 주로 DOM 엘리먼트에 접근하거나 리렌더링 없이 값을 저장할 때 유용하다.
상태(state)와 달리 useRef는 값이 변경되어도 컴포넌트를 리렌더링하지 않는다.
useRef는 초기화된 current 속성을 가진 객체를 반환하며, 이를 통해 참조하고자 하는 DOM 엘리먼트나 값을 저장할 수 있다.

해당 게시글은 chat-GPT의 도움을 받아 작성되었습니다.

출처 :
chat-GPT