useref에 대해서 알아보자

useref

• React Hook 중 하나로, ref를 생성하고 관리할 수 있게 해준다.
• DOM 노드나 인스턴스와 같은 React 엘리먼트에 직접 접근해야할 때 사용된다.
• useRef를 사용하면 클래스 컴포넌트에서의 This와 같은 역할을 하는 current 프로퍼티를 가진 객체가 반환이 된다.
• current 프로퍼티는 useRef에 전달된 인자와 동일한 값을 가지며 해당 값을 변경해도 렌더링을 다시 하지 않는다.

아래와 같은 식으로 useRef를 사용 할 수 있다.

import React, { useRef } from 'react';

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

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

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

그럼 useref의 장점은?

• DOM 요소에 접근하기가 쉽다.
• React 엘리먼트에 접근하기가 쉽다. 이를 통해 엘리먼트의 속성을 변경하거나 메서드를 호출 할 수 있다.
• 상태관리가 용이하다.
• 랜더링이 발생하지 않는다. useRef를 사용하여 생성된 객체의 상태가 변경이 되어도 컴포넌트의 렌더링을 발생시키지 않는다. 이를 통해 성능향상이 가능하다.