[React] useRef 란?

이번시간에는 React에 상태를 제어하는 useState를 이어서 useRef라는 것을 배워보도록 하겠습니다.

useRef란?

useRef는 특정 DOM을 가리킬 때 사용하는 Hook함수 입니다. 

useRef를 사용하는 예로는 대상에 대한 포커스 설정, 특정 엘리먼트의 크기나 색상을 변경할 때 사용합니다.

 

ref

ref 자체의 뜻을 설명하자면 

ref는 Javascript의 getElementById() 처럼 컴포넌트의 어떤 부분을 선택할 수 있게 

해주는 방법입니다.  

 

DOM에 접근 할 수 있도록 하는 기능을 가진 hook이라고 보면 됩니다. 

리액트에 있는 모든 컴포넌트는 reference element(래퍼런스 엘리먼트)를 가지고 있어서

어떤 컴포넌트에 ref={변수명}을 넣어준다면, 리액트에서 해당 컴포넌트를 참조하게 됩니다.

useRef 사용방법

import React, {useRef} from 'react';

• 먼저 React에서 제공해주는 hook이기 때문에 
  컴포넌트 최상단에 react와 같이 import를 해줍니다.
• 컴포넌트 내 상단에 useRef()를 선언

const here = useRef();

• DOM에 접근 할 태그 및 컴포넌트에 ref를 선언

 <input ref={here} placeholder="how are you" />

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;

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

---

참고 자료

React - useRef()

[리액트] useRef, useEffect