React - ref 객체 alert으로 출력

useRef로 input으로 받은 텍스트를 alert 창에 띄우려고 했는데

useRef는 ref 객체를 반환하기 때문에 alert 창에 그대로 출력하려고 하면 object 로만 출력된다.

 

그래서 consol 창에 출력해 보니 

ref 객체는 이러한 구조로 되어 있었다.

current 안에 input 텍스트 창에 입력한 값이 있을 것 같아서 눌러보니

current 안에 value 값으로 내가 입력한 값이 들어있었다.

그래서 alert(nameRef.current.value)를 해주니까 원하는 출력이 나왔다.

 

import {useRef} from "react";

export default function Message(){
    function onClickHandle(){
        console.log("clicked");
        console.log(nameRef.current.value);
        alert(nameRef.current.value + "님 반갑습니다.");
    }
    function onChangeName(event){
        console.log(event.target.value); 
    }

    const nameRef = useRef(null);//초기값은 null

    return (
        <div> 
             Welcome! 
             <input type="text" onChange={onChangeName} ref={nameRef} /> 
             카카오클라우드컴퓨팅 
            <button onClick={onClickHandle}>Click</button>
        </div>
    )
}

 

실행 결과