useRef

useRef란?

리액트를 사용하기 전까지 우리는 특정 태그에 접근할 때 document.getElementById() 를 사용했었다. 리액트를 배우기 전까지는 번거로운지 절대 몰랐다.

하지만, 리액트는 실제 DOM이 아닌 virtual DOM(가상돔)을 다루기 때문에 위의 방법으로 접근했을 때 문제가 생길 수 있다!!

따라서 우리는 **Ref**를 이용해 태그를 직접 변수에 저장하도록 하겠다.

아래의 그림은 함수형 컴포넌트에서의 useRef 예시이다!

예시-2 )

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

interface IState {
  count: number;
}

export default function CounterPage() {
  const router = useRouter();
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("수정되고 다시그려짐!");
  }, [count]);


  // 4. DidMount와 WillUnmount를 합치기!!
  useEffect(() => {
    console.log("마운트됨!!");
    inputRef.current?.focus();

    return () => {
      console.log("컴포넌트 사라짐!");
    };
  }, []); // 의존성 배열 (dependency array) 함수가 실행될지 안될지 의존한다

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

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

  console.log("나는 언제 실행되게?");

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