ref

기본 역할은 다른 DOM요소로 접근해서 작업할 수 있게 해주는 역할이다.

선언한 useRef 변수를 HTML요소의 ref prop을 통해 연결할 수 있으며,

uesRef 변수로 연결한 HTML요소에 접근할 수 있다.

 

uesRef 변수는 항상 current 속성을 가지고 있는 객체를 반환한다.

---

💡 ref 를 사용해보자

1. useRef hook을 사용하기 위해 import해주자. (함수형 컴포넌트에서만 사용 가능)
   

    import React, { useRef } from "react";

2. useRef 변수를 선언하자.
   

    const nameInputRef = useRef()
    const ageInputRef = useRef()

3. 선언한 useRef 변수를 HTML요소와 연결하자.
   

        <input
            type="text"
            id="username"
            value={enteredUserNm}
            ref={nameInputRef}
          />
          <label htmlFor="age">Age (Years)</label>
          <input
            type="number"
            id="age"
            value={enteredUserAge}
            ref={ageInputRef}
          />

    

key prop과 마찬가지로 ref prop은 내장 prop이며, 어느 HTML요소에도 추가할 수 있다.
따라서 어떤 HTML요소든 하나의 ref와 연결할 수 있다.

---

ref로 DOM을 조작하는 경우는 드물며, 보통 DOM에 접근하기 위해서 사용 (비제어 컴포넌트)

 

useRef는 함수형 컴포넌트에서는 ref전달이 안된다.

그러나..! 정말 꼭 사용하고 싶을 때는, useImperativeHandle hook을 사용하자..!(Forward Refs)

 

 

참고자료 : udemy react 강의