useRef

JavaScript 를 사용 할 때에는, 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 불러와 사용합니다

리액트에서도 가끔 그런 상황이 생기는데 그럴 때 사용하는것이 useRef입니다
useRef는 함수형컴포넌트에서 사용하는 react Hooks입니다
React.createRef는 클래스형 컴포넌트에서 사용합니다

useRef의 사용 예

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



export default function CounterPage() {
  
  const router = useRouter();

  
  const inputRef = useRef<HTMLInputElement>(null);
  const [count, setCount] = useState(99);

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

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

  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>
  );

  
}

useRef() 를 사용하여 Ref 객체를 만든다
이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 한다
(이 코드에서는 ref={inputRef} 를 통해 useRef를 input창에 직접 불러와서 사용했다)
결국 Ref 객체의 .current 값은 우리가 원하는 DOM을 얻게 된다

코드의 useEffect부분은 다음 블로그에서 계속 >_*