useRef 로 특정 DOM 선택하기

 

JavaScript 에서 특정 DOM 을 선택할 때에는

getElementById, querySelector  같은 DOM Selector 함수를 사용했지만

리액트에서는 ref 를 사용한다

 

아래 코드는

바로 직전게시글의 내용에서 추가하여 특정 DOM 을 선택 후, 포커싱을 input 으로 잡아보자.

걍 포커싱 잡는 코드임

---

 

InputSample.jsx

 

import React, { useState } from "react";
import { useRef } from "react";

function InputSamle() {

	const [inputs, setInputs] = useState({
		id: "",
		nickname: ""
	});
	// useRef 선언
	const nameInput = useRef();

	// 비구조화 할당을 통해 값 추출
	const { id, nickname } = inputs;

	const displayText = (e) => {
		// e.target에서 value 와 name 를 추출
		const { value, name } = e.target;
		setInputs({
			// 기존의 input 객체를 복사(불변성을 위해서) 
			...inputs,
			// name 키를 가진 value를 새로운  value 로 변경
			[name]: value
		});
	};

	const onRset = () => {
		setInputs({
			id: "",
			nickname: ""
		});
		// onRset이 id, nickname 값을 "" 로 변경한 후 아래 코드 실행
		nameInput.current.focus();

	};

		return (
			<div>
            	// ref={} 를 설정해두어서 포커싱이 id 라인으로 간다
				<input name="id" onChange={displayText} value={id} placeholder="아이디" ref={nameInput}></input>
				<input name="nickname" onChange={displayText} value={nickname} placeholder="닉네임"></input>
				<button onClick={onRset}>reset</button>
				<div>
					<b>값 : {id}({nickname})</b>
				</div>
			</div>
		);
	}

	export default InputSamle;

 

결과

 

리셋 버튼 누르기 1초전

 

짜잔 포커싱이 input으로 향했다. 원래는 reset 버튼에 있음

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