230118 React Hook useRef()

useRef()

특정 태그에 이름달기
+)무분별하게 이용하는 걸 추천하지 않음. 컴포넌트에 중복이 생길 수도 있다.->필요한곳에만 사용하기.
+)useRef()사용을 금지하는 회사도 있다.

이벤트를 사용하다 보면 특정 태그에 접근해서 핸들링하는 경우가 생긴다. 
화살표함수에 event매개변수를 이용하여 자신 태그에는 접근하는 것이 가능하지만, 다른 태그는 핸들링하기 어렵다.
이런 경우 useRef()훅을 이용해서 특정태그에 이름을 지정하고 핸들링할 수 있다.

 

 

useRef(초기값) : 처음 시작할 때 초기값은 없다. null로 주면 됨. 공백을 줘도 된다.

->(공백이면 useRef를 출력했을 때 undefined임)

태그에 이름을 ref={이름}로 주면 해당태그에 useRef를 사용할 수 있다.
useRef로 준 이름.current로 하면 해당태그가 된다. 이렇게 사용.
이름은 마음대로 적어도 된다.

const aaa = useRef(null);
const bbb = useRef();

<button ref={aaa}>버튼</button>

console.log(aaa.current);를 하면 버튼태그가 출력됨.

console.log(bbb);를 하면 undefined가 출력됨.

 

ref를 사용하면 버튼에서 다른 태그에 focus같은 함수들을 사용 가능. 
=>이름.current.focus()로 원하는 input태그에 focus 사용.
+)ref를 안쓰면 previousElementSibling 등으로 올라가거나 할 수 있음.

tip)alert는 단일매개변수만 들어갈 수 있다. 

 

 

HookRef

import { useRef, useState } from "react";

const HookRef =()=>{
    //사용자 입력값 data, 화면에 출력값 result
    const [form,setForm]=useState({data:'',result:''})

    //인풋
    const handleChange=(e)=>{
        setForm({...form,["data"]:e.target.value})
    }

    //엔터키
    const handlePress=(e)=>{
        if(e.keyCode===13) handleClick();
    }

    //등록
    const handleClick=()=>{
        setForm({data:'',result:form.data})

        //Ref의 사용
        inputTag.current.focus();
    }


    //특정 태그에 이름달기 useRef()
    //반환된 이름을 사용할 태그에 ref속성을 넣습니다.
    const inputTag=useRef();
    //console.log(inputTag);//어떤 객체. 객체 안의 current는 지정하지 않으면 undefined, 지정하면 해당 태그로 바뀜


    return(
        <>
            내용: <input type="text" onChange={handleChange} onKeyUp={handlePress} value={form.data} ref={inputTag}/>
            <button type="button" onClick={handleClick}>등록하기</button>
            <br/>
            결과: {form.result}
        </>
    )
}

export default HookRef;

 

 

입력값을 state로 관리하고, 버튼을 누르면 ref를 준 input태그에 focus가 동작한다.