[React/JS] useRef 여러 개 한번에 선언하기(useRef 배열 만들기)

ref 가 여러 개 필요한 상황...

 

useRef를 통해 input을 제어하려고 합니다!

그런데, 이런 input이 5개라면? useRef이 5개 필요하겠죠! 5개 정도는.. 하나하나 선언해줄 수 있겠지만... 비효율적인데다가

심지어는 input이 1000개라면?!? 하나하나 선언해줄 수 없겠죠..!!🤔🤔🤔

 

 

효율적으로 구현해봅시다!!

 

결론적으론 아래와 같이 정리할 수 있습니다.

Ref를 배열로 관리하고,

(item, index) =>
(
<input type="file"
  ref={(element) => { Ref배열.current[index] = element; }}
  onChange={(e) => Ref이벤트함수(e, index)} />
)

 

 

 

 

00. 문제..

---

import * as React from "react";

export default function App() {
  /** 파일이 추가될 input의 ref */
  const fileInputRef01 = React.useRef();
  const fileInputRef02 = React.useRef();
  const fileInputRef03 = React.useRef();
  const fileInputRef04 = React.useRef();
  const fileInputRef05 = React.useRef();

  return (
    <div>
      <input type="file" ref={fileInputRef01} />
      <input type="file" ref={fileInputRef02} />
      <input type="file" ref={fileInputRef03} />
      <input type="file" ref={fileInputRef04} />
      <input type="file" ref={fileInputRef05} />
    </div>
  );
}

아... 아... 이건 아닌 것 같습니다...

 

 

 

 

01. 해결하기

---

import * as React from "react";

export default function App() {
  /** 파일이 추가될 input의 ref를 배열에 담아서 관리하기 */
  const imageInputRef = React.useRef([]);
  /** ex. 컴포넌트 리스트 */
  const fileComponentList = [1, 2, 3, 4, 5];

  /** 각 파일 선택 버튼 눌렀을 때 ref에서 일어나는 일 */
  function onAddFileChange(event, index) {
    event.preventDefault();

    // 파일이 있는 경우
    if (event.target.files) {
      console.log(event.target.files[0]); // 해당 파일 접근
    }
  }

  return (
    <div>
      {fileComponentList.map((item, index) => (
        <input
          type="file"
          ref={(element) => {
            imageInputRef.current[index] = element;
          }}
          onChange={(e) => onAddFileChange(e, index)}
        />
      ))}
    </div>
  );
}

 

 

 

✨✨✨