해결된 질문2025-01-19T10:45:55.514Z

wonyongick

작성한 질문수 9

1

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

네 기본적으로는 그렇습니다. 이를 좀 더 간편히 하시면 useRef를 배열로 만들어 하나의 레퍼런스 객체가 여러개의 input을 참조할 수 있도록 설정하셔도 됩니다.

 

이해를 돕기 위해 간단한 예제 하나 보여드릴게요

const inputRef = useRef([]);

위 처럼 배열 형태의 레퍼런스 객체를 생성하면,
아래의 코드 처럼 하나의 레퍼런스 객체가 여러개의 UI 요소를 참조하도록 설정할 수 있습니다.

<input type="text" name="이름" ref={el => inputRef.current[0] = el}/>
<input type="tel" name="전화번호" ref={el => inputRef.current[1] = el}/>
<input type="radio" name="성별" ref={el => inputRef.current[2] = el}/>

• 이름을 입력하는 input은 inputRef 레퍼런스 객체의 0번에 저장되었습니다.

• 전화번호를 입력하는 input은 inputRef 레퍼런스 객체의 1번에 저장되었습니다.

• 성별을 입력하는 input은 inputRef 레퍼런스 객체의 2번에 저장되었습니다.

 

0

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

wonyongick님이 질문하신 부분은 useRef()를 활용한 입력 검증 및 포커스 제어 방법에 관한 것입니다. 이와 관련된 사항들은 React 프로젝트에서 자주 사용되는 패턴입니다.

useRef() 사용에 관한 설명

useRef를 사용하여 입력 필드에 접근하고 포커스를 제어하는 방식은 매우 일반적입니다. 특히, 입력 검증 시 특정 조건이 충족되지 않을 경우 해당 입력 요소로 포커스를 옮겨 사용자에게 시각적으로 문제를 강조할 수 있다는 점에서 유용합니다.

입력 필드별 useRef 생성

질문하신 것처럼 총 4개의 입력 항목(이름, 생년월일, 국가, 자기소개)을 모두 validation 할 계획이라면, 각각의 입력 필드에 대해 useRef를 생성하는 것이 일반적입니다. 각 필드에 맞는 ref를 생성하여 해당 필드가 유효성 검증을 통과하지 못했을 때 포커스를 맞출 수 있습니다. 따라서, 이 경우 4개의 useRef()를 생성하여 각각의 입력 요소에 연결해야 합니다. 이렇게 하면 각각의 입력 필드에 대해 개별적으로 포커스를 설정하고 그 상태를 관리할 수 있습니다.

예제 코드를 통해 이해하기

다음은 질문에서 설명한 방식을 구현한 예시입니다:

import React, { useRef } from 'react';

const MyComponent = () => {
    const nameRef = useRef();
    const birthRef = useRef();
    const countryRef = useRef();
    const bioRef = useRef();
    
    const input = {
        name: '',
        birth: '',
        country: '',
        bio: ''
    };

    const onSubmit = (e) => {
        e.preventDefault();
        if (input.name === "") {
            nameRef.current.focus();
            return;
        }
        if (input.birth === "") {
            birthRef.current.focus();
            return;
        }
        if (input.country === "") {
            countryRef.current.focus();
            return;
        }
        if (input.bio === "") {
            bioRef.current.focus();
            return;
        }
        // 모든 validation이 성공하면 폼 제출
        console.log('Form is submitted');
    };

    return (
        <form onSubmit={onSubmit}>
            <input ref={nameRef} placeholder="Name" />
            <input ref={birthRef} placeholder="Birth" />
            <input ref={countryRef} placeholder="Country" />
            <input ref={bioRef} placeholder="Bio" />
            <button type="submit">Submit</button>
        </form>
    );
};

export default MyComponent;

이 예시에서는 useRef()를 각 필드에 맞게 생성하였고, 조건에 따라 포커스를 맞추고 있습니다.

관련된 질문과 기존 지식공유자의 답변도 확인해보시면 도움이 되실 것 같습니다:
- useRef와 useState의 사용 기준

이 링크에는 useRef 사용의 장점과 적절한 사용 방법이 잘 설명되어 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏

추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.