useRef 배열로 관리하기

문제상황

const telRef = useRef(null);
const nameRef = useRef(null);
const addreffRef = useRef(null);
.
.
.

폼 요소가 무한정 많아질경우 useRef를 그때마다 계속 추가해줘야하는 문제점이 발생함

해결방법

• useRef를 배열로 관리하기

const inputRef = useRef([]);

<input type="text" name="이름" ref={el => inputRef.current[0] = el}/>
<input type="tel" name="휴대폰" ref={el => inputRef.current[1] = el}/>
<input type="radio" name="성별" ref={el => inputRef.current[2] = el}/>

// 사용
if (inputRef.current[0].value === "") alert("이름을 입력해주세요")

function ArtistPage() {
  const artistRef = useRef<null[] | HTMLDivElement[]>([]);

  const moveToArtist = (index: number) => {
    artistRef.current[index]?.scrollIntoView({
      behavior: "smooth",
      block: "center",
    });
  };

  return (
    <Layout>
      <ArtistsList moveToArtist={moveToArtist} />

      <article className="px-3 flex flex-col xl:px-[50px]">
        {artistArr.map(
          (item, index) => (
            <div
              className="mb-8 flex flex-col items-center lg:odd:items-end lg:even:items-start"
              key={index}
              ref={(element) => {
                artistRef.current[index] = element;
              }}
            >
              <Artist src={item.src} name={item.name} />
            </div>
          )
        )}
      </article>
    </Layout>
  );
}

export default ArtistPage;