[코드캠프 4주차]useRef

리액트에서 제공하는 HOOKS 중에 useRef 라고 하는 HOOKS가 있다.
기본적으로 useRef 함수는 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당한다. 이 current 속성은 값을 변경해도 상태를 변경할때 처럼 React 컴포넌트가 다시 재렌더링 되지 않는다. 또한 React 컴포넌트가 다시 재렌더링 될때에도 마찬가지로 current 속성의 값이 사라지지 않는다.

또한 useRef는 특정 DOM 을 선택할때 사용한다.
JavaScript 를 사용할 때는, 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택하지만..

리액트에서는 DOM 을 선택할 때 ref 를 사용한다.. 함수형 컴포넌트에서 ref 를 사용할 때는 useRef 라는 Hook 함수를 사용하고 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용한다.

간단한 useRef 의 사용으로 focus()를 input 창에 이동시키는 코드를 작성해 보면

import { useRef, useState, useEffect } from "react";
import { useRouter } from "next/router";

export default function index() {
  const [count, setCount] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const Router = useRouter();
  useEffect(() => {
    console.log("수정되고 다시 그려짐");
  }, [count]);

  useEffect(() => {
    console.log("마운트됌");
    inputRef.current?.focus();
    return () => {
      console.log("컴포넌트 사라짐");
    };
  }, []);

  const onClickMove = () => {
    Router.push("/");
  };

  const onClickCounter = () => {
    setCount((count) => count + 1);
  };

  return (
    <div>
      <input type="text" ref={inputRef}></input>
      <div>현재 카운트는:{count}</div>
      <button onClick={onClickCounter}> 카운트 올리기!</button>
      <button onClick={onClickMove}>
        나가기!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
      </button>
    </div>
  );
}

리액트로 부터 useRef 를 가져와서 const inputRef = useRef(null); 로 Ref를 적용시킬 변수를 선언한다.
그후에 JSX 부분에서 포커스를 이동시킬 input 태그 안에 ref={inputRef}를 선언하게 되면 마치 자바스크립트에서 ID를 가져오거나 클래스를 가져오는것 처럼 inputRef 안에는 input 태그가 ref로 인해서 태그를 가져올수 있게된다. 그후 current 객체를 사용하여 focus()를 적용시켜서 useRef를 사용할 수 있다.