[React] 10. useRef(), ref에 대해 알아보기

안녕하세요. 박기린 입니다.

이번엔 리액트 훅 - useRef()에 대해 알아보겠습니다.

 

 

ref

ref는 DOM 요소에 직접 접근해서 작업을 하기 위해 존재합니다.

 

 

ref가 필요한 이유 (ref vs state)

<input>에 state가 연결되어 있으면, 무언가를 입력할 때마다 state가 바뀝니다. 리액트의 state는 값이 변하면, 그때마다 매번 컴포넌트들이 재렌더링됩니다. 만약 블로그에 긴 글을 쓰는 경우, 수 천자의 분량을 써내려가는 동안 매번 컴포넌트가 재렌더링된다면 굉장히 비효율적일 것입니다.

 

ref는 state와 다르게, HTML DOM에 접근해서 DOM 안에 적힌 값을 알아갑니다. <input>의 값이 얼마나 변하든 상관없이, ref를 접근한 그 시점을 기준으로 <input> 안에 적힌 값만을 취합니다. 블로그에 계속 글을 써내려가도 컴포넌트는 재렌더링되지 않으며, 글을 마치고 업로드 버튼을 누르면 그 즉시 <input> DOM에서 지금까지 써온 글들을 싹 긁어다가 ref 객체에 저장합니다.

 

 

 

 

---

useRef()

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

useRef()는 useState()처럼 리액트 라이브러리에서 import할 수 있습니다.

 

 

 

const AddUser = (props) => {
  const nameInputRef = useRef();
  const ageInputRef = useRef();
{...}

그리고 함수형 컴포넌트 안에 useRef()를 실행합니다. useRef()를 사용한 값은 꼭 상수에 저장을 해주어야 합니다.

그리고 리액트 훅이기에 꼭 함수형 컴포넌트에서만 useRef()를 사용해야 합니다.

 

 

 

  <input
    id="username"
    type="text"
    value={enteredUsername}
    onChange={usernameChangeHandler}
    ref={nameInputRef}
  />          
  <input
    id="age"
    type="number"
    value={enteredAge}
    onChange={ageChangeHandler}
    ref={ageInputRef}
  />

두 개의 input은 각각 '유저 아이디', '나이'를 입력받습니다.

ref를 HTML Element에 연결할 때는 위 코드처럼 'ref' prop을 추가해주면 됩니다. key prop과 마찬가지로 기본 내장 prop입니다.

ref prop에 아까 useRef()를 실행한 값이 저장된 상수를 연결해주면 됩니다.

 

어떤 HTML Element에도 ref prop을 사용할 수 있습니다. 특히, <input>에 자주 쓰입니다. 왜냐하면 입력 데이터를 가져오고 싶어하기 때문입니다.

 

 

 

 

 

---

current object

console.log(nameInputRef);

실행 결과물 (input에 아무것도 입력하지 않고 바로 엔터 키를 누른 상황입니다.)

ref로 불러온 데이터를 콘솔에 찍어보면, object가 출력됩니다.

useRef에서 생성되는 값은 항상 객체입니다. current property를 가지고 있고, 여기에서 ref가 연결된 DOM을 확인할 수 있습니다.

 

 

 

 

current를 자세히 살펴보면 위의 사진과 같은 구조를 이룹니다.

이 안에는 ref와 연결된 DOM 노드가 고스란히 저장되어 있습니다. 이때 value property를 접근하면 DOM에 저장된 value를 알 수 있습니다. 

이렇게 state대신 ref를 사용하면, input에 새로운 값이 입력될 때마다 컴포넌트가 재렌더링 되는 일 없이, submit 버튼을 클릭함과 동시에 완성된 하나의 value를 접근할 수 있습니다.

 

 

 

 

 

 

---

ref를 사용할 때 주의사항

const dateRef = useRef('');
// dateRef = '이것은 ref입니다.' ; <- 이런 식으로 ref 데이터를 수정해서 DOM을 바꾸면 안 된다.

다만, ref로 DOM을 직접 수정/조작하는 일은 없도록 해야 합니다. 조작은 웬만하면 state를 통해서만 일어나게 합시다. 그래야 컴포넌트가 재렌더링되면서 DOM이 업데이트되기 때문입니다.