React - 유저가 입력한 폼 다루기 2

전 장에서는 버튼을 눌렀을 때 유저가 입력한 값을 얻어보았는데, 유저가 입력한 값에 대해 조건을
걸고 그 조건이 맞지 않을 시 focus를 해주는 기능에 대해 알아보자

useRef

const refContainer = useRef(initialValue);

공식문서를 찾아보면 "useRef는 .current 프로퍼티로 전달된 인자 initialValue로
초기화된 변경 가능한 객체를 반환한다" 이게 무슨 말일까? 코드를 작성해보면서 알아보자

useRef 사용하기

일단 가장 먼저 useRef는 React에서 사용되는 훅 그렇기에 import를 해준다.

import {useRef, useState} from 'react';

전 장에서는 유저가 버튼을 클릭 했을 때 console.log에 입력한 값을 출력을 해보았다.
편의를 위해 전 장에 있는 코드는 생략이 되었음에 양해를 구한다.

const userInput = useRef();
const userTextarea = useRef();
const userSelect = useRef();
...

<input ref={userInput}> ... </input>
<textarea ref={userTextarea}> ... </textarea>
<select ref={userSelect}> ... </select>

이렇게 유저가 입력한 input, textarea, select에 useRef를 할당해준다.
-> userInput, userTextarea, userSelect ref 객체가 각각
input, textarea, select 요소에 연결이 된다.

그럼 조건을 걸어서 focust를 시켜보자
handleSubmit함수에 조건에 따라 focus 기능 추가해보자

const handleSubmit = () => {
  console.log(state);
  if (state.input.length < 5) {
    userInput.current.focus();
    return;
  }
  if (state.textarea.length < 10) {
    userTextarea.current.focus();
    return;
  }
  if (state.select === "default") {
    userSelect.current.focus();
    return;
  }
  alert("저장 성공");
};

여기서 알아 두면 좋은 점은 select의 option 중 하나는 default로 값이 설정이 되어 있어야한다는 점 + state에서 초기 값은 default로 설정 해야한다는 것이다.

처음엔 되게 어려워 보였는데 간단한거 하나씩 하다 보니까 조금씩 익숙해져서 그런가 재밌네요
12월 달 부터는 사이드 프로젝트 하나 시작하는 것이 목표이고, 그렇게 하기 위해선
퇴근 하고도 꾸준히 공부 하는 것이 중요할 것 같다