[리액트] useRef의 두가지 기능 정리

useRef의 두가지 기능

1. 요소 가져오기

자바스크립트에서는 document의 메소드(getElementById, getElementsByClassName, querySelector... 등)로 DOM 요소에 접근한것처럼 리액트에서는 useRef 훅으로 DOM 요소에 접근할 수 있다'

예제

아래의 코드에서 inputEl.current는 input 요소 <input type="text" name="nickname">를 의미한다. input에 등록한 name이나 input에 입력된 값 value를 ref를 통해 등록한 InputEl.current를 통해 접근할 수 있다.

import React, { useEffect, useRef } from 'react'

const GetElement = () => {
  const inputEl = useRef()

  useEffect(() => {
    console.log(inputEl.current.name)
  })

  const KeyDownHandler = () => {
    console.log(inputEl.current.value)
  }

  return (
    <>
      <input
        type='text'
        name='nickname'
        ref={inputEl}
        onKeyDown={KeyDownHandler}
      />
    </>
  )
}

export default GetElement

 

2. 재렌더링 되지 않는 변수 만들기

로컬 변수

로컬변수란 렌더링과 상관없이 바뀔 수 있는 값을 의미한다. ref 안의 값이 바뀌어도 컴포넌트가 렌더링되지 않기 때문에 렌더링과 관련되지 않은 값을 관리할 때만 ref를 사용해 변수를 만들어준다.

최적화

변수는 컴포넌트가 렌더링될때마다 다시 선언이 된다. 렌더링할때마다 변수를 다시 만들지 않도록 방지해주기 위해 useRef 훅을 사용해 변수를 만들어준다.

예제

아래 코드에서는 useRef로 데이터 0을 초기값으로하는 count라는 변수를 생성하였다. useRef 훅을 사용해서 변수를 만들었기 때문에 변수의 값이 변경되어도 컴포넌트가 렌더링 되지 않는다. 그러므로 화면에 출력되고 있는 count 값은 초깃값 0을 계속 유지하지만 console창에 출력되는 count 값은 버튼이 눌릴때마다 1씩 증가한다.

import React, { useRef } from 'react'

const CreateVariable = () => {
  let count = useRef(0)

  const onClickHandler = () => {
    count.current = count.current + 1
    console.log(count.current)
  }

  return (
    <>
      <p>{count.current}</p>
      <button onClick={onClickHandler}>+ 1</button>
    </>
  )
}

export default CreateVariable