React 시작하기 7. 특정 DOM 선택하기 (useRef)

App.js

import React from 'react';
import InputSample from '../src/InputSample';

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

export default App;

 

InputSample.js

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

function InputSample() {
  const [inputs, SetInputs] = useState({
    name: '',
    nickname: ''
  });

  // 특정 돔을 선택하기 위한 Hook 함수로 Ref 객체 생성
  const nameInput = useRef();

  const { name, nickname } = inputs;

  const onChange = (e) => {
    const { value, name } = e.target;

    SetInputs({
      ...inputs,
      [name]: value
    })
  };

  const onReset = () => {
    SetInputs({
      name: '',
      nickname: ''
    });

    // nameInput을 focus
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        onChange={onChange}
        value={name}
        placeholder="이름"
        ref={nameInput}   // 선택하고 싶은 돔을 ref로 설정
      />
      <input
        name="nickname"
        onChange={onChange}
        value={nickname}
        placeholder="닉네임"
      />
      <button onClick={onReset}>Reset</button>
      <div>
        <b>값 : </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;