1. useRef
-
useRef는 레퍼런스(reference)를 사용하기 위한 훅이다. 리액트에서 래퍼런스란 특정 컴포넌트에 접근할 수 있는 객체를 말한다. -
useRef는 변경 가능한.current라는 속성을 가지고 있다..current속성을 변경해도 재렌더링이 발생하지 않는다. -
useRef를 사용하면 파라미터로 들어온 초기값으로 초기화된 레퍼런스 객체를 반환한다. 만약 초기값이null이라면.current의 값이null({ current: null })인 레퍼런스 객체가 반환된다. -
반환된 레퍼런스 객체는 컴포넌트의 전 생애주기(lifecycle)에 걸쳐 유지된다. 즉, 컴포넌트가 마운트 해제 전까지는 계속 유지된다.
1) import
import { useRef } from 'react'2) 선언
useRef를 컴포넌트 안에서 호출한다
기본 구문
const refContainer = useRef(초기값);
2. useRef를 사용하는 경우
1) 저장 공간으로의 활용
-
Ref는state와 비슷하게 어떠한 값을 저장해두는 저장 공간으로 사용된다. -
state대신Ref를 사용하면 불필요한 렌더링을 막을 수 있다. -
변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 유용하다.
2) DOM 요소 접근
2-1. focus
-
vanila.js의
Document.querySelector()처럼 input 요소를 클릭하지도 않아도 focus를 주고 싶을 때 사용한다. 예를 들어 로그인 화면 진입 시 아이디를 넣는 input을 클릭하지 않아도 자동적으로 focus가 되어 있도록 하여 바로 키입력을 할 수 있도록 할 때 사용한다. -
아래는
useRef()를 사용하여 Focus 버튼 클릭 시<input>에 포커스를 하도록 하는 예제다.
ref
React의 ref props은 HTML 엘리먼트의 레퍼런스를 변수에 저장하기 위해서 사용한다.
<input ref={myRef} />와 같이 코드를 작성하면 node가 변경될 때마다 myRef의.current속성에 현재 해당되는 DOM node를 저장한다. 따라서 myRef 객체의.current속성을 통해input속성에 접근할 수 있다.
import { useRef } from "react";
function App() {
const inputText = useRef(null); // { current: null }
const onButtonClick = () => {
// `current`는 마운트 된 input element를 가리킨다.
inputText.current.focus();
}
return (
<>
// input 속성에 props를 통해 ref 값을 넘겨준다.
<input ref={inputText} type='text'></input>
<button onClick={onButtonClick}>Focus</button>
</>
);
}
