[React] React에서 DOM 조작하기 - useRef (feat.일기장)

◈ useRef()

React에서는 특정 DOM요소에 접근하고자 할 때 useRef를 사용한다. useRef()를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정해주면, Ref 객체의 .current 값은 우리가 원하는 DOM을 가리키게 된다.
우리는 이번 예제에서는 지난번 만들었던 일기장에서 작성자와 내용에 문자열이 특정 길이 이상 입력이 들어오지 않으면 그에 해당하는 DOM에 focus 처리를 해주는 기능을 구현해 볼 것이다.
 
먼저 React의 Hook 함수 중 useRef를 import 해준다.

import { useRef } from "react";

 
다음으로는 useRef() 함수를 호출해서 반환값을 const(상수)에 담아준다. 이렇게 해주면 const에 React.MutableRefObject가 저장 되고, 이는 DOM 요소에 접근할 수 있게 해준다.

const authorInput = useRef();
const contentInput = useRef();

input 태그 안에 ref={authorInput}, textarea 태그 안에 ref={contentInput}으로 태그 안에 ref를 써준 후, 
마지막으로 저장 버튼을 누르면 문자열 개수를 확인하고 focus를 해주기 위해 handleSubmit 코드를 수정해준다.

const handleSubmit = ()=>{
    if (state.author.length < 1){
        //focus줘야할 곳
        authorInput.current.focus();
        return;
    }
    if (state.content.length < 5){
        //focus줘야할 곳
        contentTextarea.current.focus();
        return;
    }
    alert("저장성공");
};

일기 내용을 5글자 미만으로 작성 후 저장 버튼을 눌렀을 때 textarea에 focus가 가는 모습