[React] useRef

const refContainer = useRef(initialValue);

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.
https://ko.reactjs.org/docs/hooks-reference.html#useref

JS에서는 DOM 요소를 class나 id이름을 queryselector나 getElementsBy로 가져왔던 것에 비해 , React에서는 useRef라는 hook을 사용한다.

우선 useState와 마찬가지로 useRef를 import 한 후,

import React, { useRef } from "react";

가져오고자 하는 요소의 이름을 직관적으로 알 수 있는 useRef 객체를 생성한다.

const diaryInputTitle = useRef();

그리고 해당 요소의 속성(attribute)에 ref={(useRef 할당한 변수 이름)}을 추가한다.

<input name="author" onChange={stateUpdate} ref={diaryTitleInput} />

useRef의 객체는 .current라는 속성의 컨테이너 정도로 이해하면 된다. 즉, current는 ref 속성을 건 요소 그 바로 자체이다. 만약 포커스를 주고 싶다면,

    if ( 조건~ ) {
      diaryTitleInput.current.focus();
      return;
    }

다음과 같이 어떤 조건을 만족시켰을 때, 해당 부분으로 포커스가 가도록 설정할 수 있다.