React.js | 입문 | useRef

컴포넌트에서 특정 DOM을 선택하거나 포커싱을 주어야 할 때 ref를 사용한다.

먼저 포커싱을 주는 예제를 살펴보면,

 

전체 코드

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 { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  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;

 

먼저 useRef를 react에서 가져오고,

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

 

특정 변수를 useRef()로 선언한다.

const nameInput = useRef();

 

그 다음 input 인자에 ref를 변수명으로 넣어주고,

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

 

원하는 위치에 current.focus() 를 실행해준다.

const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
  };

 

이러면 onReset 함수가 실행되면 포커싱이 nameInput을 ref속성으로 가진 곳에 포커싱이 된다.

 

useRef로 선언된 변수에 변경사항이 생길 경우에 useState와는 달리 리렌더링이 발생하지 않는다.

하지만 useRef로 선언된 변수는 같은 메모리 주소를 가지기 때문에 === 연산이 항상 true값을 반환하게 된다.

 

 

참조

https://ko.reactjs.org/docs/hooks-reference.html#useref