Lieto: UseRef 🚀

무한 스크롤을 구현하며 useRef에 대한 내용이 나와서 정리를 한번 해보자!

useRef

Ref: reference

querySelector대신 사용이 가능
useRef로 관리하는 값은 값이 변해도 화면이 렌더링되지 않음

즉, useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React 훅

const ref = userRef(value)

// ref=> 객체
// {current:value}
// 위 매개변수의 value가 current값으로 들어감

useRef는 리액트 생명주기 전체를 통해 유지가 된다.
즉, 계속 저장이 되어짐

사용법

1. 저장공간
   State의 변화 => 렌더링 => 컴포넌트 내부 변수들 초기화
   Ref의 변화 => No 렌더링 => 변수의 값이 유지됨
   또한 Ref는 컴포넌트가 렌더링 되어도 그 값을 유지하고 갖는다.

2. Dom 요소에 접근
   마치 Document.querySelector 같은 역할을 할 수 있음

import {useRef} from 'react'
const App =()=>{
  const inputRef = useRef()
  
  useEffrct(()=>{
    console.log(inputRef)
  },[])
  
 return (
   <div>
   <input ref={inputRef} />
     // 이렇게하면 current안에 inputObject가 들어감
   <button>로그인</button>
   </div>
   )
  
}

ref라는 props를 이용하면 해당 엘리먼트에 대한 태그 정보를 얻을 수 있는 것이다!