useRef로 특정 DOM 선택하기

• 리액트에서 특정 DOM을 선택하는 역할 ex) getElementById, QuerySelector

• 특정 DOM에 접근할 때 사용

• 외부 라이브러리를 사용할 때 유용

• 원하는 포커스(DOM) 위치에 ref={} 의 형태로 작성

• 포커스를 잡으려면 nameInput.current.focus() 형태로 작성 / .current값은 DOM을 가르킴

InputSample.js

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

function InputSample() {
    const [inputs, setInputs] = useState({
        name : '',
        nickname : ''
    });
    const nameInput = useRef();
    const {name,nickname} = inputs; //비구조화 할당을 통해 값 추출

    const onChange = (e) => {
        const {name, value} = e.target; //우선 e.target에서 value,name 추출
        
        setInputs ({
            ...inputs, //기존의 input 객체를 복사한 뒤
            [name] : value, // name 키를 가진 값을 value로 설정
        });
        //setInput자리에서는 [name]값은 name OR nickname
        //name을 바꾸거나 nickname을 바꾸겠다. 그래서 이렇게 새로운 객체를 설정해주는 것
    }

    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 InputSample;

App.js

import React, { useRef, useState } from "react";
import UserList from "./InputSample";

function App() {
  return (
		<InputSample />
	)
}

export default App;

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C