[React] Typescript + useRef (Forwarding Refs) : HTMLInputElement 요소 받아오기

리액트에서는 되도록 돔탐색을 하지 않는 것이 좋다고 한다. 그래서 useRef를 사용해보았다. 전달하는 대상이 Html 엘리먼트가 아닌 컴포넌트 타입이라면 ref를 전달하기 위해 아래와 같이 사용하는 것이 좋겠다!

 

---

 

useRef : HTMLInputElement 요소 받아오기

1. import useRef 
2. React ref를 생성하고 ref 변수에 할당
3. ref를 JSX 속성으로 지정해서 ref={ref}으로 전달

이러한 과정을 거치면,  ref.current는 DOM 노드를 가리키게 된다!!

 

 

이전 코드

import React from "react";

const Test = () => {
    const handleScroll = () => {
        const screenHeight = document.querySelector("#intro").clientHeight;
        ...
    }

    return (
    	<div id="intro">
    )
}

export default Test;

 

수정한 코드

import React, { useRef } from "react";

const Test = () => {
    const ref = useRef<HTMLInputElement>();

    const handleScroll = () => {
        const screenHeight = ref.current.clientHeight;
        ...
    }

    return (
    	<div ref={ref}>
    )
}

export default Test;

 

참고 문서

https://ko.reactjs.org/docs/forwarding-refs.html

Forwarding Refs – React