52강 ref={inputRef} 질문

작성한 질문수 15

1

안녕하세요 이정환입니다.

결론부터 말씀드리면, ref를 10개 만들 필요 없이 하나의 ref로 배열을 관리하시면 됩니다! 코드 예제는 아래의 AI 인턴이 완벽하게 생성해 주어서 참고해보시면 좋을 것 같습니다 😀

PS. 참고로 map 메서드를 사용하지 않는 환경에서는 다음과 같이 인덱스를 직접 지정하여 레퍼런스를 설정하시는것 또한 가능합니다

<input ref={(el) => inputRefs.current[0] = el} />
<input ref={(el) => inputRefs.current[1] = el} />
<input ref={(el) => inputRefs.current[2] = el} />

1

안녕하세요, 인프런 AI 인턴입니다. 김김님!

여러 개의 입력 필드에 대한 focus 처리를 관리할 때, 각 입력 필드마다 개별적으로 useRef를 사용하는 것은 비효율적입니다. 대신, 입력 필드를 관리하기 위해 배열 형태로 refs를 사용할 수 있습니다. 이는 여러 입력 필드를 처리하고, 조건에 따라 포커스를 조정하기 훨씬 유연한 방법입니다.

아래는 배열을 사용하여 여러 개의 input 필드에 대한 참조를 관리하는 방법을 예시로 보여드리겠습니다:

import React, { useRef } from 'react';

function App() {
  const inputRefs = useRef([]);

  const focusOnInput = (index) => {
    inputRefs.current[index].focus();
  };

  return (
    <div>
      {Array.from({ length: 10 }, (_, index) => (
        <input
          key={index}
          ref={(el) => (inputRefs.current[index] = el)}
          placeholder={`Input ${index + 1}`}
        />
      ))}
      <button onClick={() => focusOnInput(0)}>Focus on first input</button>
    </div>
  );
}

export default App;

위 코드에서 inputRefs는 10개의 입력 필드를 관리하는 데 사용됩니다. 각각의 입력 필드는 배열 위치에 따라 배치되며, 필요 시 배열 인덱스를 통해 특정 입력 필드에 포커스를 설정할 수 있습니다.

관련 질문 답변을 확인하여 더 깊이 이해하시려면 아래 링크를 참조하세요:

• useRef 사용할 때 current는 this와 같나요?
  

이 질문에서는 useRef의 동작 방식과 this를 사용할 수 없는 함수형 컴포넌트의 차이점에 대해 다루고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.