React (10) Ref

■ Ref란?

- reference의 약자(참조변수)이며 자바스크립트에서 html요소를 선택할 때 document.getElementById('아이디값')와 같은 선택함수와 같이 요소를 가져온 후 조작하였다.

- React에서는 위 방식에 더해서 Ref를 통해 html요소를 조작할 수 있도록 지원한다.

 

■ 사용방법

1. import

import { useRef } from "react";

2. Ref변수 생성

const inputRef = useRef(null);

3. html요소에 ref속성 추가하기

{/* 
    input요소에 ref속성을 추가하고 inputRef변수에 할당시, 현재 input요소에 대한 정보를 inputRef를 통해 참조할 수 있다.
*/}
<input id="id1" type="text" ref={inputRef}/>

input요소를 ref를 통해 선택할 수 있다.

 

■ 최종코드

import { useRef } from "react";

function ReactRef(){

    const inputRef = useRef(null); // Ref변수 생성

    const refFocus = () => {
        console.log(inputRef, inputRef.current);
        
        // 현재 참조하고 있는 요소에 대한 정보가 current에 할당되어 있다.
        inputRef.current.focus();
    }

    // 자바스크립트방식 요소 선택
    const javascriptFocus = () => {
        document.getElementById("id1").focus();
    }

    return(
        <>
            {/* 
                input요소에 ref속성을 추가하고 inputRef변수에 할당시, 현재 input요소에 대한 정보를 inputRef를 통해 참조할 수 있다.
            */}
            <input id="id1" type="text" ref={inputRef}/>

            <input type="button" value="REF" onClick={refFocus}/>

            <input type="button" value="Javascript Focus" onClick={javascriptFocus}/>
        </>
    )

}

export default ReactRef;