userRef를 활용한 Validation 활용법

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

5.10) useRef로 컴포넌트의 변수 생성하기

해결된 질문

작성

117

특정 요소의 입력검증을 위해 useRef()를 생성하고

해당 element tag에 ref={inputRef}를 생성한 이후에

onSubmit()에서 강의대로 입력확인 처리를 하였습니다.

const onSubmit = (e) => {
   console.log(input.name, input.birth)
   if(input.name === "") {
      console.log(inputRef.current)
      inputRef.current.focus()
      return
   }
   if(input.birth === "") {
      console.log(birthRef.current)
      birthRef.current.focus()
      return
   }                
}

질문의 bith에 대한 입력검증을 하고자 하면

신규로 birthRef = useRef()를 생성하고

element tag에 ref={birthRef}를 추가 /

onSubmit에서 해당 로직을 적용해야 하는 건가요?

총 4개 입력항목(이름, 생년월일, 국가, 자소개)이면

useRef()를 4개 생성해서 엘리먼트별 입력확인을

하는구조로 개발이 되어야 하는건가요?

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

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

네 기본적으로는 그렇습니다. 이를 좀 더 간편히 하시면 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번에 저장되었습니다.

인프런 AI 인턴

안녕하세요, 인프런 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 사용의 장점과 적절한 사용 방법이 잘 설명되어 있습니다.

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

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

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

wonyongick

질문자

답변 감사합니다. 도움이 많이 되었습니다.

인프런 커뮤니티 질문&답변