useRef

useRef Hook 이란?

• 리액트에서 DOM의 사용은 지양하는 것으로 익히 알고 있지만, 어쩔 수 없이 사용해야하는 순간이 있다.
• 이럴때 DOM 엘리먼트의 주소값을 사용하는 방법으로 useRef Hook이 있다.

DOM 주소값을 활용해야 하는 경우

• focus
• text selection
• media playback
• 에니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

→ 위의 상황이 아닌 경우 useRef의 남용은 하지 말아야한다.

사용하기

• 사용할 리액트 문서에서 useRef Hook을 불러온다.

import React, { useRef } from 'react';

• useRef를 활용하여 Ref 객채를 만들고, 해당 객체를 선택하고자하는 요소에 ref 값으로 설정해준다.
• 그러면 해당 Ref 객체의 .currunt 값은 해당 요소의 DOM 을 가르킨다.

function Focus() {
  const inputEl = useRef(null); 
  // 비워줘도 상관 없다.

  const onButtonClick = () => {
    inputEl.current.focus();
    // 여기서 currunt 는 ref값으로 Ref 객체가 설정된 요소의 DOM 주소이다.
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      {// ref값으로 Ref 객체를 설정하여 해당 Ref 객체의 }
      {// .currunt 가 해당 요소의 DOM 주소가 된다.}
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

---

+

• Ref 객체 가 선언된 변수마다 각각의 DOM 주소를 가지고 있다고 보면 될 것 같다.
• 변수명을 잘 정해놔야 나중에 헷갈리지 않을 듯.