[React] useRef로 특정 DOM으로 focus설정하기

useRef (hook)함수? 

• 특정 DOM선택할 때
• 다시 랜더링 되어도 동일한 참조값을 유지 할 때

useRef로 특정 DOM선택하기

특정 엘리먼트의 크기나 위치를 가져오거나 스크롤바 위치를 가져오거나 설정하거나 포커스의 위치를 설정하거나

라이브러리를 이용할 때 특정 DOM에다가 설정해야하는 부분이 발생할 때 사용하게 됨

 

즉, 컴포넌트에서 특정 DOM을 선택해야 할 때, ref를 사용해야하고,

함수형 컴포넌트에서 이를 설정할 때는 useRef를 사용하여 설정해야함

 

 

패키지 구조

 

App.js

import React from 'react';
import InputsSample from './components/InputsSample';

function App() {
//사용하고자하는 componets호출
  return <InputsSample />;
}
export default App;

 

InpustSample.js

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

function InputsSample() {
  const [inputs, setInputs] = useState({
    username: '',
    nickname: '',
  });
  // useRef 호출
  const nameInput = useRef();
  /*
  구조 분해 할당으로 
  const username = inputs.username;
  const nickname = inputs.nickname;
  코드를 간략하게 사용할 수 있음
  */
  const { username, nickname } = inputs;
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };
  const onReset = () => {
    setInputs({
      username: '',
      nickname: '',
    });
    // 특정 DOM에 적용하고자하는 기능 작성
    nameInput.current.focus();
  };
  return (
    <div>
      <input
        name='username'
        placeholder='이름'
        onChange={onChange}
        value={username}
        ref={nameInput}
      />
      {/*
        사용하고자하는 DOM위치에
        ref={useRef에 적용한 변수값}입력!
      */}
      <input
        name='nickname'
        placeholder='닉네임'
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값:</b>
        {username} ( {nickname} )
      </div>
    </div>
  );
}

export default InputsSample;

 

결과 화면

 

useRef로 컴포넌트 안의 변수 만들기

useRef는 DOM을 선택하는 용도 외에도, 다른 용도로 컴포넌트 안에서

조회 및 수정 할 수 있는 변수를 관리하는 것!

 

useState로 변수를 관리해도 되지만 변하지않는 값을 리랜더링을 할 필요가 없을 때는

useRef로 리랜더링 필요없이 값을 유지할 수있다는 장점이 있어 사용하고

리랜더링 되도 지정된 값은 변함없이 유지됨

 

React컴포넌트는 기본적으로 내부 상태(state)가 변할 때 마다 다시 랜더링 되는데

그 말은 함수 내부의 변수들이 모두 다시 초기화가 되고 함수의 모든 로직이 다시 실행된다는 의미!

 

useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트에서 리랜더링 되지않음

 

React컴포넌트 함수가 호출되어 화면이 갱신되기를 바라지만 함수 내부의 변수들이 기존에 저장하고 있는 값을

잃어버리고 초기화되는 문제점도 발생하기 때문에 기존에 참조하고 있던 컴포넌트 함수 내의 값을

그대로 유지하고자 할 때(조회 및 수정 등) 사용됨

 

• setTimeout, setInterval의 id값을 기억할 때
• 외부라이브러리를 사용하여 생성된 인스턴스를 담을 때
• Scroll위치를 기억하고 싶을 때