[React] Day 13 - useRef로 특정 DOM 만들기

📌useRef란?

 리액트를 사용하는 프로젝트에서도 가끔 직접 DOM을 선택해야하는 상황이 발생 할 때가 있다. 그리고 video.js, JWPlayer 같은 HTML5 Video 관련 라이브러, 또는 chart.js 같은 그래프 관련 라이브러 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM에 적용하기 DOM을 선택해 하는 상황이 발생할 수도 있다. 

  => 그럴때 Ref라는 것을 사용한다! 

 

초기 파일은 저번 시간에 완성한 MultiInput.js를 사용한다. 

 

➡️우리가 저번 시간에 만들었던 내용은 초기화 버튼을 누르고나면 포커스가 초기화 버튼에 그대로 남아있게 된다. 우리는 Ref를 이용해서 초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히게 하겠다.

 

UseRef.js

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

function UseRef() {

  const [inputs, setInputs] = useState({

    name: '',

    nickname: ''

  });

  const nameInput = useRef();

  const { name, nickname } = inputs;

  const onChange = (e) => {

    const { value, name } = e.target;

    setInputs({

      ...inputs,

      [name]: value

    });

  };

  const onReset = (e) => {

    setInputs({

      name: '',

      nickname: ''

    })

    nameInput.current.focus();

  };

  return (

    <div>

      <input name="name" placeholder='이름' onChange={onChange} value={name} ref={nameInput}></input>

      <input name="nickname" placeholder='닉네임' onChange={onChange} value={nickname}></input>

      <button onClick={onReset}>초기화</button>

      <div>

        <b>값: </b>

        {name}({nickname})

      </div>

    </div>

  );

}

export default UseRef;

 

결과사진

=> 이렇게 초기화 버튼을 누르면 이름 input에 커서가 남게된다.