ref
를 사용한다. useRef
라는 Hook 함수를 사용React.createRef
함수 사용.cf) JavaScript에서는 특정 DOM
을 선택해야 하는 상황에 getElementById
, querySelector
같은 DOM Selector 함수를 사용해서 DOM 을 선택한다.
import { useState, useRef } from "react";
function App() {
// ------------------------------------여러 인풋 관리
const [inputs, setInputs] = useState({
name: "",
nickname: "",
});
const nameInput = useRef();
const { name, nickname } = inputs;
const onChangeInputs = (e) => {
const { value, name } = e.target;
setInputs({
...inputs,
[name]: value,
});
};
const onResetInputs = () => {
setInputs({
name: "",
nickname: "",
});
nameInput.current.focus(); 👈
};
return (
<div>
{/* <input type="text" onChange={onChange} value={text} />
<button onClick={onReset}>초기화</button>
<div>입력값 : {text}</div> */}
<hr />
<input
name="name"
placeholder="이름"
onChange={onChangeInputs}
value={name}
ref={nameInput} 👈
/>
<input
name="nickname"
placeholder="닉네임"
onChange={onChangeInputs}
value={nickname}
/>
<button onClick={onResetInputs}>초기화</button>
<div>
<b>입력값: </b>
{name} (= {nickname} )
</div>
</div>
);
}
export default App;
focus
가 ref={nameInput}
를 적용시킨 앞의 인풋으로 맞춰진다.useRef()
를 사용할 때 파라미터
를 넣어주면, 이 값이 .current
값의 기본값이 된다.