useRef

리액트를 사용하기 전에 자바스크립트에는 특정 DOM에 접근할 때 document.getElementById, document.getElementsByTagName와 같은 것들을 사용했다.

DOM?

• 돔(DOM)이란 Document Object Model 의 약자이다.
  먼저 Document Object를 번역하면 문서 객체이다.
  문서 객체란 html의 문서의 태그들을 javascript가 이용할 수 있는 객체로 만들면 그것을 문서 객체라고 한다.
  Model은 번역하면 모형, 주형, 모듈 이라는 의미가 된다.
  비슷하게 여기서는 문서 객체를 인식하는 방식 또는 방법 정도로 생각하면 된다.

리액트 또한 특정 DOM을 접근해야 하는 상황이 발생 할 때도 있는데, 위와 같은 방법으로 사용하게 되면 문제가 될 수 있다.
리액트에서는 실제 DOM이 아닌 Virtual DOM(가상돔)을 다루기 때문이다.

Virtual DOM?

• 가상돔(Virtual DOM)이란 말 그대로 가상의 돔이다.
  가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고, DOM에 변경이 있을 경우 해당 변경을 반영한다.

따라서 리액트에서는 Ref를 이용해 태그를 직접 변수에 저장하도록 한다.
함수형 컴포넌트에서는 useRef 훅을 이용해 특정 태그에 접근할 수 있다.

// 훅 임폴트
import { useEffect, useRef } from "react";

export default function RefPage() {
  //Ref코드 생성
  const inputRef = useRef(null);

  //태그에 접근해서 실행시킬 함수 
  useEffect(() => {
    console.log("마운트");
    inputRef.current?.focus();
  });
  // Ref를 적용하고 싶은 input태그(=접근하고 싶은 태그)
   return <input type="text" ref={inputRef} />;
}

위 코드는 useEffect 훅과 useRef 훅을 이용하여 렌더 되었을때 input 태그에 포커스를 주는 코드이다.
useEffect 훅의 자세한 내용은 따로 포스팅을 해놨으니 참고하면 좋을 것 같다.
위 코드를 보면 먼저 리액트에서 제공해주는 useRef 훅을 불러온 후에 변수에 할당해준다.
그 할당해준 inputRef를 접근하고 싶은 태그에 ref 속성에 넣어준다.
그 후에 useEffetc 훅을 사용하면 렌더가 되었을때 실행을 해준다.
그때 inputRef.current.focus() 가 실행이 되면서 현재 input 태그에 포커스가 들어오게 된다.
위와 같이 특정 태그를 조작할 수 있게 해주는 것이 useRef 훅이다.