React에서 useRef를 사용하는 경우는 다음과 같다
-예를 들면, 값을 여러개 입력하고 첫 번 째 칸으로 이동한다고 해보자,
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
태그에서 온클릭 이벤트가 발생하는 것과 똑같은 효과가 나타난다