[React] useRef

useRef

useRef는 특정DOM을 선택해야하는 상황에서 사용을 합니다.
특정 엘리먼트의 크기를 가져온다거다나 스크롤바의 위치를 가져오거나 설정을 해야할때 useRef를 사용합니다.
자세한 설명은 React 공식 문서에서 확인 가능합니다.
https://ko.reactjs.org/docs/hooks-reference.html#useref

useRef 사용해보기

User.js

	import React, { useState, useRef } from 'react';
	const User = () => {
	const [inputs, setInputs] = useState({
	name: '',
	nickname: ''
	});
	const nameInput = useRef();
	const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출
	const onChange = e => {
	const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
	setInputs({
	...inputs, // 기존의 input 객체를 복사한 뒤
	[name]: value // name 키를 가진 값을 value 로 설정
	});
	};
	const onReset = () => {
	setInputs({
	name: '',
	nickname: ''
	});
	nameInput.current.focus();
	};
	return (
	<div>
	<input
	name="name"
	placeholder="이름"
	onChange={onChange}
	value={name}
	ref={nameInput}
	/>
	<input
	name="nickname"
	placeholder="닉네임"
	onChange={onChange}
	value={nickname}
	/>
	<button onClick={onReset}>초기화</button>
	<div>
	<b>값: </b>
	{name} ({nickname})
	</div>
	</div>
	);
	}
	export default User;

view raw User.js hosted with ❤ by GitHub

App.js

	import React from "react";
	import User from "./components/User";
	const App = () => {
	return(
	<User/>
	)
	}
	export default App;

view raw App.js hosted with ❤ by GitHub

초기화 버튼을 눌렀을때 이름 input에 포커스가 잡히도록 하는 예제입니다.
이번 예제는 velopert님의 예제를 참고했습니다.
https://velopert.com/

VELOPERT.LOG

 

실행화면.