useRef() 여러개 관리 하기

웬만한 컴포넌트에서 거의 다들 useState 혹은 useRef 를 많이 쓸 것이다. 

 

useRef로 각각의 input 타입들에 접근해 값을 뽑아내려고 했는데 그 개수가 조금 많았다. 

 

     const userRef = useRef();
     const phoneRef = useRef();
     const emailRef = useRef();
     const emvadeRef = useRef();
     const facebookRef = useRef();
     const instaRef = useRef();
     const twitterRef = useRef();
     const naverRef = useRef(); 
     
     // 완전 별루

 

요정도는 그래 그냥 쓰자 하고 넘어갈 수 도 있지만 각각 input 마다 빈 문자열 인지 확인 해주려고 하는데 일일이 조건문으로 검사하는 것 보단 배열에 넣어서 반복문에 넣고 싶었다. 그렇다면 또 배열에 넣는 코드가 더 추가되게 되니 애초에 배열에 담아서관리 하는 법을 한번 알아보자. 

 

 

  const inputRef = useRef([]);  // 초기값에 빈 배열 투척

 

 

 

 <input type="text" name="주최자" 
 className="input-body"
 placeholder="Please Enter Oranizer..." 
 ref={el => (inputRef.current[0] = el)} />     
 
 <input type="text" name="연락처"
 className="input-body"
 placeholder="Please Enter PhoneNumber..." 
 ref={el => (inputRef.current[1] = el)} />

 

 

요롱 식으로 배열로서 관리가 가능하게 되고

 

 

	for(let i = 0; i<inputRef.current.length-4; i++){
            if(inputRef.current[i].value === ""){
                alert(inputRef.current[i].name + "는(은) 필수 입력사항입니다.");
                inputRef.current[i].focus();
            break;
        }
	}

 

 

간단히  빈 문자열 검사 까지 완료 할 수 있겠다