useRef

1. useRef

Javascript에서 HTML태그를 선택할 때는 보통 getElementId를 사용했다.
React에서는 useRef라는 Hook함수가 HTML 태그에 접근하도록 도와준다.

useRef는 DOM을 직접 선택하여 HTML 태그에 접근가능하게 하는데
어떤 상황에서 useRef를 사용하면 좋은 지 알아보자.

• 특정 엘리먼트 크기나 위치를 가져올 때.
• 특정 DOM에 focus를 설정할 때.
• 특정 라이브러리를 사용할 때.
• 스크롤 바 위치를 가져오거나 설정해야 할 때.

클래스형 컴포넌트에서는 React.createRef()혹은 콜백 함수로
특정 DOM에 접근 가능하다.

---

2. useRef 사용하기

useRef 기본 설정

• 사용 예시

import { useRef } from 'react'

export default function Web() {
  const inputEl = useRef(null);
	
  return <input ref={inputEl} id="fileTag" type="file" onChange={readImage}></input>
}

useRef는 useState, useEffect처럼 react에서 가져와야 사용할 수 있다.
가져온 useRef를 호출해서 inputEl이라는 객체를 생성한 후에
선택하고 싶은 DOM에다가 ref={inputEl}을 작성하면
DOM에 inputEl를 이용해 접근할 수 있다.

---

3. useRef의 기능

위에서 작성한 코드에 아래와 같은 함수가 추가된다고하자.

const handleFileBtn = () => {
	inputEl.current.click()
}

이 함수는 새로 추가할 버튼의 onClick에 넣을 함수이다.
Ref의 current 안에는 click이라는 기능이 있다.

이는 이름 그대로 current는 inputEl에 들어온 태그를 뜻하며 그 태그를 click하겠다는 기능이다.

그리고 버튼 태그를 추가하고 위 함수를 onClick에 바인딩 하자.

<button onClick={handleFileBtn}>이미지 등록 버튼</button>

이렇게 하면 button을 클릭했을 때 inputEl.current.click()이 실행되고, 그것은 우리가 useRef에 넣어둔 input 태그를 클릭한 것과 같은 결과가 나온다.

위 사진의 이미지 등록 버튼을 눌렀을 때 input태그를 클릭한 것과 같은 결과가 발생한다.

여기서 조금 더 응용 해보자!
위 코드의 return부분을 다음과 같이 바꿔보자.

return (
  <>
    <div>
      <img onClick={handleFileBtn} style={{ width: "500px" }} id="image" />
      <input
        hidden={true}
        ref={inputEl}
        id="fileTag"
        type="file"
        onChange={readImage}
      ></input>
      <button onClick={handleFileBtn}></button>
    </div>{" "}
  </>
);

위의 코드를 보면 함수handleFileBtn가 img태그와 button태그에 바인딩 되어있다.
그리고 input 태그에는 hidden 기능을 이용해 태그를 숨겨주었다.

이러면 우리는 미리보기 이미지를 클릭할 때, 이미지 등록 버튼을 클릭할 때
모두 input=file 태그를 클릭한 것과 동일한 결과를 볼 수 있다.