[React] useRef

1. useRef란?

useState나 useEffect처럼 많이 사용하지는 않지만 특정한 DOM을 잡아서 그 DOM을 변경 할 수 있는 장점이 있어요
간혹 DOM에 직접 선택을 해야하는 경우가 있는데 특정 스타일을 준다던가 스크롤 위치를 가져오거나 렌더링 했을경우 input에 focus가 되어야 하는 경우 useRef를 사용해요

2. useRef 예시!

import { useRef } from "react";

export default function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <Wrapper>
        <Input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>Focus the input</button>
      </Wrapper>
    </>
  );
}

https://kimdongeun12.github.io/blog-posting/04_useRef/
저는 예제가 있어서 보면서 확인해야 이해가 좀 더 잘되기에 적용을해서 보여드릴게요

useRef를 사용하게되면 current 라는 코드를 확인할 수가 있는데용

여기서 current란?

useRef는 current의 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.

console.log(inputEl)

input을 변경 하기 위해서는 inputEl.current로 객체에 접근해야해요