[React] useRef() 여러 개 한번에 관리하기

useRef()는 따로따로 하나씩만 선언해서 사용했었는데

검색을 하다 우연히 여러개를 지정해서 관리할 수 있다는 것을 알게되었다.

 

 

const inputRef = useRef({});

초기값에 빈 객체를 넣어준 후

아래와 같이 ref를 설정하면 해당 요소가 객체에 담기게 된다.

<input type="text" ref={(el) => (inputRef.current["text"] = el)} />
<input type="email" ref={(el) => (inputRef.current["email"] = el)} />

 

 

인덱스를 이용하여 배열처럼도 저장 가능하다.

  const listRef = useRef([]);

{posts.map((post, index) => (
    <li key={post.id} ref={(el) => (listRef.current[index] = el)}>
      {post.content}
    </li>
))}