[React] React-hook useRef 무엇인가?

useRef란?

useRef를 간략하게 말하면 특정 Dom을 직접 건드릴 수 있게 해주는 것이다. 다들 프로젝트를 해보면서 그러한 경우가 있을 것이다. 이미지 업로드를 하는데 나는 아바타 모양을 클릭 시 이미지 업로드를 하고 싶을 때 useRef를 사용하여 input type=file의 Dom을 건드려 아바타 모양에 기능을 넣어준 경우가 있을 것이다.

 

아 위에 말하는 Dom은 HTML과 JavaScript를 이어주는 공간이다. 작성한 HTML을 JavaScript가 이해할 수 있도록 Object로 변환하는 것이다.

 

이제 위에서 말한 예시를 코드로 한번 실행시켜 보면서 어떻게 사용하는지 알아보자!

 

import { useRef } from "react"

const Profile = () => {
  const imageRef = useRef()
  
  const handleImageClick = () => {
    imageRef.current.click()
  }
  
  return (
    <div>
      <div classname="profileImage" onClick={handleImageClick} />
      <input type="file" imageRef={imageRef} style={{display: "none"}} />
    </div>
  )
}

위 코드처럼 input type="file"을 display none으로 안보이게 한 뒤에 해당 Click 기능을 useRef로 가져와 hanlder안에 기능을 넣어 실제 기능을 사용하고 싶은 위치에 onClick으로 전달해 줘 기능을 사용할 수 있게 해 준다

 

간략하게 말하면 가져올 Dom의 기능을 건드려서 다른 곳에 전달해 주는 것이다.

 

useRef의 공식 개념은 이렇게 쓰여있습니다.

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

useRef를 주로 사용하는 곳은

 

첫 번째로 특정 DOM 선택할 때입니다. 위에 예시가 특정 DOM을 선택한 것입니다.

두 번째로 컴포넌트 안의 변수를 만들 때입니다.

• setTimeout, setInterval을 통해서 만들어진 id
• 외부 라이브러리를 사용하여 생성된 인스턴스
• scroll 위치

세 번째로 리렌더링 방지할 때 사용합니다.

컴포넌트는 자신의 state가 변경되거나, 부모에게 받는 props가 변경되었을 때마다 리렌더링 됩니다. 심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받는 props가 변경되지 않더라도 리렌더링 됩니다.
useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않으므로 리렌더링 방지에 활용할 수 있습니다.