[React] React.js 강좌 12. useRef

1. 개요

javascript를 사용할때는 특정 DOM을 선택하는 상황에서 getElementById나 querySelector같은 DOM Select 함수를 사용해서 DOM을 가져오곤 합니다.

특정 <div id=james/> 같은 부분의 DOM을요.

리엑트를 사용할때도 DOM을 직접 선택해야하는 상황이 생기는데 이럴 때 리액트에선 ref를 사용합니다.

일반적으로 애플리케이션 대부분의 컴포넌트에서 DOM을 다루는 것은 권장되지 않습니다.

왜냐하면 내부 DOM 요소에 대한 정보를 지나치게 간섭하게 되면 의존성에 대한 문제가 발생하기 때문입니다.

하지만 포커스, 선택, 애니메이션과 같은 기능을 관리하기 위해서는 DOM 요소에 접근을 해야하기 때문에 일반적으로 위와 같은 기능에서는 ref를 통해 DOM에 접근하는 것을 허용합니다.

이때, 함수형 컴포넌트에서 ref를 사용할때는 useRef라는 Hook 함수를 사용합니다.

 

 

 

2. 사용 예제

초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히도록 useRef를 사용해보겠습니다!

 

import React, { useState, useRef } from 'react';
 
function Search() {
  const [inputs, setInputs] = useState({
    names: '',
    nickname: ''
}); // input DOM을 초기화 하기 위한 useState
 
  const nameInput = useRef(); // Input DOM에 접근하기 위한 ref 선언
 
  const { names, nickname } = inputs; // 비구조화 할당을 통해 값 추출
 
const onChange = e => {
  // 값이 변경될 때의 이벤트
    const { value, name } = e.target; // 우선 input DOM의 e.target 에서 name 과 value 를 추출합니다.
    // 추출한 name과 value 값을 setInputs에 적용합니다.
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤(spread 사용)
      [name]: value // input DOM에서 name과 같은 키를 가진 DOM의 value를 초기화
    });
  };
 
  const onReset = () => {
    setInputs({
      names: '',
      nickname: ''
    });
    nameInput.current.focus(); // Input DOM에 현재 포커스를 지정합니다.
  };
 
  return (
    <div>
      <input
        name="names"
        placeholder="이름"
        onChange={onChange}
        value={names}
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {names} ({nickname})
      </div>
    </div>
  );
}
export default Search;

 

 

 

위처럼 useRef()를 사용해 Ref 객체를 만들고, 이 객체를 선택하고 싶은 DOM에 ref 값으로 설정해야 합니다. 그리고 .current를 선택하면 ref로 지정한 DOM을 가리키게 됩니다.