Ref의 활용과 useRef

💡 Ref

---

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다. 예를 들어 HTML을 작성할 때, div 등의 DOM 요소에 이름을 달 경우 <div id = "my-id"> 와 같이 id를 사용하는데, 이처럼 React에서도 DOM을 선택해 직접 접근하기 위해 Ref를 사용한다.

 

Ref를 사용해야 할 때

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
• 애니메이션을 직접적으로 실행시킬 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

 

💡 비제어 컴포넌트 방식 - Ref 활용

---

import React, { useRef } from "react";

export default function UncontrolledForm() {
    const inputRef = useRef();

    console.log(inputRef);

    function handleSubmit(e) {
        e.preventDefault();
        alert(inputRef.current.value);
    }

    return (
        <form onSubmit={handleSubmit}>
            <label>닉네임: </label>
            <input type="text" name="nickname" ref={inputRef} />
            <input type="submit" value="제출" />
        </form>
    );
}

 

 

💡 Ref 심화

---

forwardRef는 부모 컴포넌트에서 자식 컴포넌트의 ref를 다루고 싶을 때 사용한다. 자식 컴포넌트의 DOM 노드에 접근하는 것은 컴포넌트의 캡슐화를 파괴하기 때문에 권장되지는 않는다.

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// 이제 DOM 버튼으로 ref를 작접 받을 수 있습니다.
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

 

useRef는 .current 프로퍼티를 가지고 있고, useRef() hook으로 만든 변수는 컴포넌트의 생애 주기를 통해 유지되지만 .current 프로퍼티의 값이 변경되어도 컴포넌트 리렌더링을 발생시키지 않는다. 즉, DOM 노드에 useRef()를 통해 생성한 ref를 붙이거나 떼어도 컴포넌트는 인지하지 못한다는 것을 의미한다.

DOM 노드에 ref가 attach하거나 detach할 때 어떤 코드를 실행하고 싶다면 callback ref 방법을 쓸 수 있다. ref에 useRef로 반환된 값을 넘기는 게 아니라 함수를 넘기는 것이다.

 

import React, { useState, useCallback } from "react";
import Cat from "./components/Cat";
import "./styles.css";

export default function App() {
  const [height, setHeight] = useState(0);

  const callbackRef = useCallback((node) => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <div>
      <h4> 고양이가 세상을 구한다 ️</h4>
      <p> 내 키는 : {height}px 이야</p>
      <div ref={callbackRef}>
        <Cat />
      </div>
    </div>
  );
}

 

💡 Reference

---

https://ko.reactjs.org/docs/refs-and-the-dom.html#gatsby-focus-wrapper

Ref와 DOM – React

https://leehwarang.github.io/2020/11/29/ref.html

React useRef의 다양한 활용 방법(mutable object, callback ref와 forwardRef) - 이화랑 블로그