useRef 사용하기

 

useState로 상태를 관리하면, 렌더링이 계속 발생하므로, 비효율적이고 코드를 짜기가 어려워진다. 
useRef를 사용하면, 현재 저장하고 싶은 값을 re-rendering없이 저장할 수 있다. 

 

 

const refOject=useRef(initialValue);

 

 

useRef란?

.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같습니다.

 

 

useRef를 언제 사용하는지?

1. 특정 DOM 선택하기

- 리액트에서는 DOM을 선택할 때 ref를 사용합니다. 함수형 컴포넌트에서 ref를 사용할 때는 useRef HOOK함수를 사용하고 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef라는 함수를 사용합니다.

 

2. re-rendering방지

함수가 실행될 때마다, 컴포넌트는 호출되어 실행되는데, 이를 렌더링이라고 합니다. 

useRef를 사용하면, 값이 바뀐다고 컴포넌트가 re-rendering되지 않으므로, re-rendering을 방지할 수 있습니다. 

useRef에서는 자신의 state값이 변경되거나 부모 컴포넌트로부터 받은 props가 변경될 시, re-rendering합니다.

 

 

사용예시

import React, { useState, useRef } from "react"

function App() {
  const [question, setQuestion] = useState("")
  const inputQuestion = useRef("")

  console.log("render")

  return (
    <>
      <input ref={inputQuestion} />
      <button onClick={() => setQuestion(inputQuestion.current.value)}>제출</button>
      <div>질문:{question}</div>
    </>
  )
}

export default App

화면을 처음 불러올때와, 버튼을 클릭할 시에 화면이 re-rendering되는 것을 확인할 수 있습니다.