인프런 커뮤니티 질문&답변
작성한 질문수
52강 ref={inputRef} 질문
해결된 질문
작성
·
23
0
제출할때 문제가 되는 입력창으로 포커스를 보내는 로직에서 입력창이 10개면 inputRef 같은 레퍼런스 객체를 10개 만들어서 입력창마다 ref={inputRef} 같은 코드를 추가하는건가요?
답변 2
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의 동작 방식과 this를 사용할 수 없는 함수형 컴포넌트의 차이점에 대해 다루고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.