React에서 useRef를 사용하는 경우는 다음과 같다

1. 컴포넌트에 focus를 위치시킬 필요가 있는 경우.

-예를 들면, 값을 여러개 입력하고 첫 번 째 칸으로 이동한다고 해보자,

import React, { useState, useRef } from 'react';

function InputTest() {
  const [text, setText] = useState('');
  const nameInput = useRef();

  const onChange = e => {
    setText(e.target.value)
  };

  const onReset = () => {
    setText('');
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        onChange={onChange}
        value={text}
        ref={nameInput}
      />

      <button onClick={onReset}>초기화</button>
      <div>
        <b>내용: </b>
        {text}
      </div>
    </div>
  );
}

export default InputTest;

const nameInput = useRef();

: Ref 객체를 만들어준다.

---

---

---

<input

  name="name"

  onChange={onChange}

  value={text}

  ref={nameInput}

/>

: 선택하고 싶은 DOM에 속성으로 ref 값을 설정해준다.

---

---

nameInput.current.focus();

: Ref 객체의 current 값은 우리가 선택하고자 하는 DOM을 가리킨다.
그리고 포커싱을 해주는 DOM API focus() 를 호출한다.

찾아본 내용은 배운거 보다 너무 많아서 한가지만 적도록 하겠다..

수업시간에 배운 경우는 이미지 업로드를 할 때 css가 적용되지 않는
<input type='button'> 대신 <div> 태그를 사용할 때 div태그에 클릭이벤트가 발생할 시 그 이벤트가 input 태그가 대신 받도록 설정하는 방법으로 useRef가 사용됬다.

import { gql, useMutation } from "@apollo/client";
import { Modal } from "antd";
import { useRef, useState } from "react";

const UPLOAD_FILE = gql`
  mutation uploadFile($file: Upload!) {
    uploadFile(file: $file) {
      url
    }
  }
`;

export default function Image() {
  const fileRef = useRef<HTMLInputElement>(null);

  const [imgUrl, setImgUrl] = useState("");
  const [uploadImg] = useMutation(UPLOAD_FILE);

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

    try {
      const result = await uploadImg({
        variables: {
          file,
        },
      });
      // console.log(result.data.uploadImg.url);
      // 2. 요청결과 URL을 state에 저장하기
      setImgUrl(result.data.uploadFile.url);
      console.log(imgUrl);
    } catch (error) {
      Modal.error({ content: "에러" });
    }
    // 1. uploadfile API 요청하기(요청 결과 URL 받아오기).
  };

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

  console.log(imgUrl);
  return (
    <div>
      <h1>이미지 업로드 연습하기 </h1>
      <div
        style={{
          width: "50px",
          height: "50px",
          backgroundColor: "#BDBDBD",
          cursor: "pointer",
        }}
        onClick={onClickImage}
      >
        이미지 선택
      </div>
      <input
        style={{ display: "none" }}
        type="file"
        onChange={onChangeImg}
        ref={fileRef}
      />
      <img src={`https://storage.googleapis.com/${imgUrl}`} />
    </div>
  );

수업 때 작성한 이미지 업로드 예제 코드이다.

return 문 에서 이미지선택 이라는 div 태그에 onClickImage 이벤트가 발생하면 input 태그에서 온클릭 이벤트가 발생하는 것과 똑같은 효과가 나타난다