useRef()

개요

const ref = useRef(initialValue)

렌더링에 영향을 안받는 독립적인 데이터를 저장할때 쓰인다.
또 useRef를 사용해 생성된 ref 객체를 JSX 내의 특정 DOM 요소에 ref 속성으로 할당함으로써, 해당 DOM 요소에 직접적으로 접근할 수 있게 된다. 이는 포커스 설정, 직접적인 DOM 조작 등의 작업에 유용하다.
(ex. input을 클릭하지 않고 해당하는 레이블을 클릭해도 input에 포커싱 된다.)

---

활용예제

import React, { useRef } from 'react';

function MyComponent() {
  const myInputRef = useRef(null);

  const focusInput = () => {
    // 직접 DOM에 접근하여 input 요소에 포커스를 줍니다.
    myInputRef.current.focus();
  };

  return (
    <div>
      <input ref={myInputRef} type="text" />
      <button onClick={focusInput}>포커스 주기</button>
    </div>
  );
}

위 예제에서는 useRef를 사용하여 input 요소에 접근하고, 버튼 클릭 시 해당 요소에 포커스를 줄 수 있도록 한다. 이러한 방식으로 useRef는 React에서 DOM 요소를 직접 조작할 필요가 있을 때 또는 컴포넌트의 여러 렌더링에서 일관된 데이터를 유지하고자 할 때 유용하게 사용될 수 있다.

---

적용점

렌더링이 되기 전 임시 저장소로 활용하면 좋을지 실무에선 주로 어디에 사용되는지 궁금하다. ref는 reference의 약자이고 '참조'라는 뜻을 가지고 있다. 포커싱 외에도 활용할 방안을 생각해봐야겠다.

---

참조

• https://react-ko.dev/reference/react/useRef
  (FE재남과 [React 공식문서 스터디 그룹]의 비공식 한글 번역 사이트 'useRef')
• https://youtu.be/kyodvzc5GHU?list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO
  (별코딩 'React Hooks에 취한다' 시리즈)