[React] useRef로 input 상태 관리하기

안녕하세요, 피터팬입니다!

오늘은 useRef로 input 상태를 관리해볼 건데요.

https://peter-coding.tistory.com/204?category=1287898 

[React] useState로 input 상태 관리하기

지금까지는 위에서처럼 useState를 이용하여 input 상태를 관리해왔습니다.

useRef를 이용하면 더 간편하게 input상태를 관리할 수 있습니다.

 

적용법

import {useRef} from 'react'

 

사용법

inputRef.current에서 유용하게 쓰일 값으로는 value, focuse()가 있습니다.

const inputRef = useRef();
console.log(inputRef)
...
<input ref={inputRef}/>

 

예시

const inputRef = useRef();
const handleButton = () =>{
	if(inputRef.current.value===""){
    	inputRef.current.focus();
    }else{
    	inputRef.current.value="";
    }
}
...
<input ref={inputRef}/>
<button conClick={handleButton}>Click!</button>

 

---

Reference

https://react.vlpt.us/basic/10-useRef.html

10. useRef 로 특정 DOM 선택하기 · GitBook