useRef

useRef 란?

특정 DOM을 가리킬 때 사용하는 Hook 함수.
Ex. 포커스 설정, 특정 엘리먼트의 크기/색상 변경 등..

 

ref

: ref는 JS의 getElementById()처럼, component의 어떤 부분을 선택할 수 있게 해주는 방법이다.
리액트에 있는 모든 component는 reference element를 가지고 있어서,
어떤 component에 ref={변수명} 을 넣어주면, 해당 component를 참조하게 된다.

 

useRef 사용하기

3초 뒤에 input창에 포커싱이 되도록 설정해보자.

import React, { useRef } from "react";

const App = () => {
  // 1. Ref객체 만들기
  const here = useRef();
  2. focus( ) DOM API 호출
  setTimeout(() => here.current.focus(), 3000);
  return (
    <div>
      <h1>Hello</h1>
      // 2. 원하는 곳에 ref 값으로 설정하기
      <input ref={here} placeholder="how are you" />
    </div>
  );
};

export default App;

1) useRef( )를 사용해 Ref객체 만들기
2) 해당 객체를 활용한 작업 설정 .current.focus()
3) 만든 Ref객체를 선택하고 싶은 DOM에 ref 값으로 설정하기
-> Ref객체의 .current값은 선택한 DOM을 가리키게 된다!
+) useRef에 파라미터를 넣어주면, 이 값이 .current의 기본 값이 된다!

 

useRef 언제 사용할까?

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

1. 컴포넌트에 focus를 위치시킬 필요가 있는 경우.

- 예를 들어, 값을 여러개 일력하고 첫 번째 칸으로 이동해야 하는 경우 필요하다. 

2. 속성 값을 초기화(clear)할 필요가 있는 경우.

- 예를 들어, 카운터의 값을 0으로 초기화 할 필요가 있을 때.  (타이머 0으로 만들기 같은...)  
- setInterval 이나 setTimeout과 같은 함수는 clear 시켜주지 않으면 메모리를 많이 소모하기 때문이다.

3.useRef로 컴포넌트 안의 변수 관리하기

- 컴포넌트의 속성 정보를 조회 & 수정할 때 (+리 렌더링을 하지 않으면서..)

useRef를 활용한 변수는 아래와 같은 곳에 쓰인다.