map 함수 내에서 useRef를 사용하는 방법

map 함수 내에서 useRef를 사용하는 방법에 대해 설명드리겠습니다. 일반적으로 map 내에서 직접 useRef를 호출하는 것은 불가능하지만, 다음과 같은 방법으로 구현할 수 있습니다:

1. useRef로 배열 생성하기:

import React, { useRef } from 'react';

const Component = () => {
  const itemsRef = useRef([]);

  return (
    <ul>
      {['red', 'orange', 'yellow', 'green', 'blue'].map((color, index) => (
        <li 
          key={color} 
          ref={el => itemsRef.current[index] = el}
        >
          {color}
        </li>
      ))}
    </ul>
  );
};

이 방법에서는 useRef를 사용하여 빈 배열을 생성하고, map 함수 내에서 ref 콜백을 통해 각 요소를 배열에 할당합니다.

2. ref 콜백 함수 사용하기:

import React, { useRef, useEffect } from 'react';

const Component = () => {
  const itemsRef = useRef(new Map());

  const addToRefs = (el, id) => {
    if (el && !itemsRef.current.has(id)) {
      itemsRef.current.set(id, el);
    }
  };

  useEffect(() => {
    console.log(itemsRef.current);
  }, []);

  return (
    <ul>
      {['red', 'orange', 'yellow', 'green', 'blue'].map((color) => (
        <li key={color} ref={(el) => addToRefs(el, color)}>
          {color}
        </li>
      ))}
    </ul>
  );
};

 

이 방법에서는 Map 객체를 사용하여 각 요소의 참조를 저장합니다. addToRefs 함수를 통해 각 요소를 Map에 추가합니다.

이러한 방법들을 사용하면 map 함수 내에서 각 요소에 대한 ref를 생성하고 관리할 수 있습니다. 이는 동적으로 생성된 요소들에 대해 DOM 조작이 필요한 경우에 유용합니다.