useRef

seRef
함수형 컴포넌트에서 쓰는 리액트 훅중 하나

ex)A버튼을 누르면 B버튼을 누르게되는 기능으로 활용

---

기본 원리
// 훅 임폴트
import {useRef} from 'react'

//Ref코드 생성
const inputRef = useRef()

// Ref를 적용하고 싶은 input태그(=접근하고 싶은 태그)
//

//태그에 접근해서 실행시킬 함수 _ useEffect참고는 바로 아래에서!
useEffect(()=>{
console.log("마운트 됨")
inputRef.current?.focus()
})

---

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를 가져와 Ref를 적용시킬 변수를 선언한다 -> const inputRef = useRef(null)

JSX 부분에서 포커스를 이동시킬 input 태그 안에선언 -> ref={inputRef}
current 객체를 사용하여 focus()를 적용시켜서 useRef를 사용 -> inputRef.current?.focus();