useRef, 동적으로 만드는 방법은 무엇입니까?

useRef 후크를 동적으로 만드는 방법을 알아야 하는 이유는 무엇입니까?
예를 들어 여러 가지 이유로 필요합니다. 때때로 우리는 반복으로 생성된 구성 요소가 있고 요소의 속성에 액세스하기 위한 참조가 필요합니다.

export default function Component() {
  const list = ["one item", "other item"];
  const accordion = useRef();
  return list.map((item) => (
    <Accordion title="Something" ref={accordion}>
      <p>{item}</p>
    </Accordion>
  ));
}

반복의 모든 항목을 동일한 ref로 참조하고 있기 때문에 위의 코드는 작동하지 않지만 어떻게 해결할 수 있습니까? 생각만큼 복잡하지 않습니다.

먼저 createRef() 함수에 대해 알아야 합니다. 나머지는 매우 간단하지만 더 나은 설명을 위해 코딩해 보겠습니다.

export default function Component() {
  const list = ["one item", "other item"];
  const elementsRef = useRef(list.map(() => createRef()));
  return list.map((item,index) => (
    <Accordion title="Something" ref={elementsRef.current[index]}>
      <p>{item}</p>
    </Accordion>
  ));
}

첫 번째 코드와 두 번째 코드의 차이점은 3번 줄입니다. 여기서 목록 크기로 참조 목록을 생성하는 문제ref를 해결한 다음 참조를 구성 요소에 사용할 때 현재 액세스하는 것만 큼 간단합니다. 변수 elementsRef의 속성을 확인하고 반복 인덱스가 있는 ref를 가져옵니다.