[리액트 #1] useRef

드디어 Vue를 끝내고 리액트로 넘어왔다. 시간에 쫓겨서 강의를 듣다가(마저 다 듣지도 못함 ㅠ) 정리할 시간이 없어서 Vue에 대한 포스팅을 더이상 하지 않았다. 어제부터 리액트 강의가 시작되었는데 그동안 리액트에 대해 내부원리를 잘 모르고 그냥 느낌만 알고 구현했었는데 커리큘럼들을 보니까 다양한 훅들을 짧게 배우는 듯 싶어서 따로 공부하는 시간이 필수적으로 필요해 보인다.

오늘은 useRef를 배웠다. 리액트를 쓰면서 useRef를 써본적은 없지만 DOM에 직접 접근할 때 사용한다는 것을 어렴풋이 기억하고 있었다.

용도

1. DOM에 직접 접근

   특정 엘리먼트의 크기를 가져온다거나, 스크롤바 위치를 가져오는 등 DOM에 접근해야만 기능 구현이 가능할때 사용한다.

   // App.js
   import { useRef, useState } from "react"
   import Input from "./components/input.js"
   
   function App() {
       const inputRef = useRef()
   
       return (
           <div>
               <Input ref={inputRef} />
               <button onClick={() => inputRef.current.focus()}>Focus</button>
           </div>
       )
   }
   
   export default App

   // index.js
   
   import React from "react"
   
   const Input = React.forwardRef((_, ref) => {
       return (
           <>
               Input: <input ref={ref} />
           </>
       )
   })
   
   export default Input

• 사용법은 ref의 값으로 useRef의 값으로 생성한 변수를 넣으면 그 변수의 current를 통해 ref에 접근하여 직접 DOM 요소에 접근이 가능해진다.

2. 지역 변수로 사용

   지역변수라고 해서 useState와의 차이점은 값이 변경될 때 다시 렌더링을 하지 않는 것이다.

마치며

DOM에 직접 접근하려고 useRef를 사용하는 것은 알았지만 지역변수로도 사용이 되는줄은 몰랐다. 렌더링 되지 않는 변수를 작성하려면 그냥 const나 let으로 선언하면 되는거 아닌가? 싶어서 찾아보니

useRef 는 일반적인 자바스크립트 객체로 heap 영역에 저장이 되는데
그래서 어플리케이션이 종료되거나 가비지 컬렉팅 될 때 까지 참조할 때 마다 같은 메모리 주소를 가지게 되고 값이 바뀌어도 리렌더링 되지 않는다.

반면 함수 컴포넌트 내부에 변수를 선언한다면, 렌더링 될 때마다 값이 초기화 된다.

따라서 이런 경우 useRef를 사용하는 것이 더 효율적이다.

참고자료

https://react.vlpt.us/basic/12-variable-with-useRef.html