[React]useRef

useRef의 사용방법

<input type="file"/> file 태그가 이미지를 올릴 수 있게 도와주는 역할을 하는데,
input 모양 그대로 두게되면 디자인적으로 좋지 않으니 다른 <div> 를 만들어서 디자인을 하고
이 디자인된 div를 사용해 사용자들이 이미지를 업로드 할 수 있게 하기 위함이다.

1.우선 react에서 useRef를 사용하겠다고 선언해줍니다.

import {useRef} from 'react'

2.useRef사용을 위한 변수를 아래처럼 만들어주면 됩니다.

const FileRef = useRef();

3.input에 사용할 경우 아래 코드처럼 ref안에 변수를 넣어주면 됩니다.

<input style={{display:"none"}} ref={FileRef}/>

4.onChange 함수를 만들어주어 input의 file 값을 받아오기 위함이다. 여러개라서 있어서 [0]인덱스번호를 적어주었습니다.

  const onChangeFile = async (event) => {
    const file = event.target.files?.[0];

5.onClick 함수를 만들어주어 디자인된 div를 클릭해도 div가 아닌 가려놓은 input이 클릭된다.

  const onClickImage = () => {
    FileRef.current?.click();
  };

---

import { useRef } from "react";

export default function ImageUploadPage() {
	const FileRef = useRef(null);
  
    const onChangeFile = async (event) => {
   		 const file = event.target.files?.[0];
    }
    
    const onClickImage = () => {
   		 FileRef.current?.click();
    }
    
    return(
      <>
      	<div onClick={onClickImage} >이미지선택</div> // 디자인된 div
      <input
        style={{ display: "none" }} //file 태그를 위해 있는것이므로 가려준다.
        type="file" //파일을 올려주기위한 타입
        onChange={onChangeFile} //올라가는 파일의 값을 받아서 뿌려주기위한 이벤트
        ref={FileRef} // 다른걸 클릭해도 너가 클릭될거야 라는 useRef
      />	
      </>
    )

}

javascript에서 돔을 지정해 이벤트핸들링할 경우 getElementById, querySelector를 사용하지만 리액트에서는 이렇게 사용을 지양하므로 react 자체에서 제공해주는 Hook인 useRef를 사용해야합니다.

useState는 데이터를 저장하지만,
state가 바뀔 때마다 컴포넌트가 리렌더링 된다는 단점을 지니고 있습니다.
만약 우리가 컴포넌트 별로 특정 데이터를 가지게 하고, 이러한 데이터들을 리렌더링 없이 관리하고 싶다면 useRef를 사용한다면 가능합니다.

---

🤔 이 기능이 유용하게 쓰이는 경우!

• setTimeout, setInterval 을 통해서 만들어진 id
• 외부 라이브러리를 사용하여 생성된 인스턴스
• scroll 위치

🤔 이 기능을 사용하는 이유!

• 특정 DOM 선택하기
• 컴포넌트 안의 변수 만들기
• 리렌더링 방지하기