useRef

useRef

• 컴포넌트의 속성값을 조회 및 수정할 수 있으며 리렌더링 되지않는다
• 다른 태그와 연결시켜 A를 눌렀을 때 B의 값이 실행되도록 할 수 있다

---

1. input 기본값

<input type="file"/>

결과↓

input의 속성값에 있는 type을 file로 지정하면 컴퓨터에 있는 파일을 선택할 수 있는데 이때 기본으로 제공되는 디자인은 예쁘지 않다

---

2. input과 div 연결하기

import { useRef } from "react";

export default function Img() {
  const fileRef = useRef(null);

  const onClickImage = () => {
    fileRef.current.click();
  };
  // div에 연결된 onclick 함수를 실행하면 input에 지정해주는 fileRef가 실행된다
  return (
    <>
      <div
        style={{
          width: "50px",
          height: "50px",
          backgroundColor: "pink",
          color: "white",
          borderRadius: "20px",
        }}
        onClick={onClickImage}
      >
        이미지선택
      </div>
      <input type="file" ref={fileRef} style={{ display: "none" }} />
// 기존의 input은 display none을 이용하여 보이지 않게 해준다
    </>
  );
}

결과↓

input과 div를 useRef로 연결하여 스타일을 적용한 div를 누르면 input의 속성인 파일업로드를 사용할 수 있게 만들어줄 수 있다