React 객체 state 관리와 useRef 활용하기

이전 글에서 다뤘던 배달 음식 주문 폼을 개선해봤다.

여러 개로 분리된 state를 하나로 통합하고, useRef를 활용해 입력 유효성 검사 기능을 추가했다.

구현 과정

State 통합하기

기존에 분리되어 있던 3개의 state를 객체 형태의 하나의 state로 합친다.

기존 코드

const [menu, setMenu] = useState("");
const [address, setAddress] = useState("");
const [request, setRequest] = useState("");

 

변경 후

const [state, setState] = useState({
  menu: "",
  address: "",
  request: "",
});

 

이에 맞춰 JSX의 value 속성도 수정한다.

return (
  <div>
    <h2>배달의민족 주문</h2>
    <select name="menu" value={state.menu} onChange={onChange}>
      <option>아이스크림</option>
      <option>젤리</option>
      <option>초콜릿</option>
    </select>
    <div>배달 주소</div>
    <input name="address" value={state.address} onChange={onChange} />
    <div>배달 요청사항</div>
    <textarea name="request" value={state.request} onChange={onChange} />
    <button onClick={onSubmit}>주문 완료</button>
  </div>
);

 

이벤트 핸들러 통합하기

하나의 state로 관리하게 되면서, 이벤트 핸들러도 하나로 통합할 수 있다.

스프레드 연산자(...)로 기존 state를 유지하고, 계산된 속성명([name])으로 해당 필드만 업데이트한다.

const onChange = (e) => {
  const { target: { name, value } } = e;
  setState({
    ...state,
    [name]: value,
  });
};

 

useRef로 입력 검증하기

useRef를 활용해 주소 입력 필드가 비어있을 경우, 해당 필드에 포커스를 강제한다.

const addressRef = useRef();

const onSubmit = () => {
  if (addressRef.current.value === "") {
    addressRef.current.focus();
    return;
  }
  alert(`주문이 완료되었습니다. 메뉴: ${state.menu}, 주소: ${state.address}, 요청사항: ${state.request}`);
};

 

주소 입력 필드에 ref 속성을 연결한다.

<input name="address" value={state.address} ref={addressRef} onChange={onChange} />

 

 

정리

• 여러 개의 연관된 state는 객체로 통합해 관리할 수 있다.
• 스프레드 연산자와 계산된 속성명을 활용하면 객체 state를 간편하게 업데이트할 수 있다.
• useRef로 DOM 요소에 직접 접근해 포커스 제어가 가능하다.
• 입력 유효성 검사 후 조건에 맞지 않으면 return으로 이후 로직을 중단할 수 있다.