[TIL] 0617 | React with Redux, Next.js, TypeScript

목차

• 무엇이 폼을 복잡하게 하는가
• 양식 제출 처리 및 사용자 입력 값 가져오기

✧ 무엇이 폼을 복잡하게 하는가

• 언뜻 보기에 form 은 단순해 보이지만 실상은 그렇지 않다. 적어도 개발자의 시각에서 바라본다면 말이다. 폼과 input 값은 다양한 상태(state)를 나타낼 수 있기에 상당히 복잡한 구조를 띄고 있다.

폼이 고려해야만 하는 수 많은 가능성에 대하여

• 하나 이상의 입력 값이 모두 유효하지 않을 수도 있고, 모두 유효할 수 있다. 또 서버로 리퀘스트를 보낸 뒤에 특정 값이 사용 가능한지 확인해야 하는 비동기 유효성 검사를 이용해야 할 때 상태(state)를 알 수 없을 때도 있다. (ex. 이메일 주소가 유효한지 확인해야 할 때) 따라서 폼은 우리가 생각하는 것보다 훨씬 복잡할 수 있다. 우리가 잠깐 생각해보기만 한 가능성만 해도 벌써 두가지 상태(state)인데, 실제로는 하나의 폼이 유효한지 아닌지만 따지는 것이 아니라 폼에 있는 '모든 입력 값'에 대해서도 유효성을 고려해야 한다고 생각해보라. 그리고 각각의 입력 값의 상태(state)가 모여서 전체 폼의 상태(state)를 결정해야만 한다.

폼과 입력 값이 유효하지 않을 때와 유효할 때

• 폼과 폼 내부의 input(입력) 값이 유효하지 않을 때 특정한 입력 값에 대해서 에러 메세지를 출력하고 문제가 되는 입력 값을 강조해야 한다. 또 하나 이상의 입력 값이 유효하지 않다면, 이 입력 값이 제출되거나 저장되지 않도록 해야만 한다. 반면 폼과 폼 내부의 input(입력) 값이 유효하다면 이 입력 값이 확실하게 제출되고 저장되도록 처리해 주어야 한다. 거기다 에러 메세지를 출력하고 유효하지 않은 입력 값을 강조하는 부분 또한 처리해주어야 하는데, 이렇게 되면 사용자 입력 값의 유효성을 언제 확인해야 할지를 고려해야 하기 때문에 훨씬 더 복잡해질 것이다.

어느 시기에 사용자 입력 값의 유효성을 확인해야 할까?

• 사용자의 입력 값의 유효성을 언제 확인해야 할까? 시기는 크게 세 가지로 나눠볼 수 있을 것이다.

사용자 입력 값 확인 1. 폼이 완전히 제출 되었을 때

• 먼저 폼이 완전하게 제출되었을 때 사용자 입력 값의 유효성을 검증할 수 있을 것이다.

• 장점 : 폼이 완전하게 제출된 뒤에 유효성 검증을 할 때에는 사용자가 유효한 값을 입력하게 할 수 있다. 다시 말하자면 사용자가 이메일 입력 칸을 입력하는 중에 완전히 입력하지도 않았는데 경고 메세지를 받지 않을 수 있다는 이야기다. 사용자가 입력을 마칠 때까지 충분히 기다린 뒤에 폼을 제출 하고 에러를 보여주게 되므로 불필요한 경고를 줄일 수 있어서 꽤 괜찮은 방법이라 할 수 있다.

• 단점 : 단점은 사용자가 값을 입력 후 폼을 제출하고 난 뒤에 문제가 있는 부분을 알려주게 된다면 사용자는 잘못된 입력 값이 있는 시기로 돌아가서 값을 다시 입력해야만 한다는 것이다. 이것은 엄청난 문제는 아니지만 최종적으로 제공하고자 하는 사용자 경험 또한 아닐 것이다.

사용자 입력 값 확인 2. 사용자가 값을 입력하고, input 요소에서 포커스 아웃 되었을 때

• 사용자가 값을 입력하고 난 뒤에 input 요소에서 포커스를 잃었을 때 사용자가 무엇을 입력했는지를 확인하고 유효성을 검증할 수 있을 것이다.

• 장점 : input 요소에서 포커스를 잃었을 때 입력 값의 유효성을 검증하는 경우, 전체 폼이 제출되고 경고 메세지를 보내기 전에 사용자가 유효한 값을 입력할 수 있다. 혹은 사용자가 특정 입력을 끝내자마자 바로 그 시점에 바로 경고 메세지를 보낼 수 있다. 즉, 전체 폼이 제출되기 전까지 기다리는 것이 아니라, 하나의 특정한 입력을 마칠 때 까지만 기다리는 것이다. 이 방법은 사용자가 입력 값을 작성하지 않았을 때 매우 유용하다.

• 단점 : input 요소에서 포커스를 잃었을 때 입력 값의 유효성을 검증하는 경우, 사용자가 그 전에 유효하지 않은 값을 입력하고 나서 고치는 중에도 사용자의 입력 값이 유효한지 아닌지를 실시간으로 알려줄 수 없다는 것이다.

사용자 입력 값 확인 3. 사용자가 키를 한 번씩 칠 때마다 검증하는 방법.

• 사용자가 input 요소 안에서 키를 한 번씩 칠 때마다 검증하는 방법이나 input 요소가 변경될 때마다 검증할 수 있을 것이다.

• 장점 : input 요소 안에서 키를 한 번씩 칠 때마다 사용자가 입력한 값의 유효성에 대해 바로 피드백을 주는 방식이기 때문에 실시간으로 사용자의 입력 값이 유효한지 아닌지를 알려줄 수 있다.

• 단점 : input 요소 안에서 키를 한 번씩 칠 때마다 사용자가 입력한 값의 유효성에 대해 바로 피드백을 주는 방식이기 때문에 사용자가 유효한 값을 입력하기도 전에 경고 메세지를 보내게 된다. 즉, 키를 한 번씩 칠 때마다 유효성을 검사한다면 사용자가 해당 폼에 아무런 것도 입력하지 않은 상태임에도 그 상태에서는 모든 값이 유효하지 않은데다가 사용자는 아직 새로운 값을 입력할 기회조차 받지 못했으므로 수 많은 에러들을 마주하게 된다.

정리

• 지금까지 폼이 복잡해진 이유와 입력 값의 유효성 검사에 대한 시기를 살펴보았다. 앞서 사용자의 입력 값을 확인하는 시기에 대해서는 저마다 장/단점이 있기 때문에 여러 조건들을 고려해서 방법을 다양하게 사용하는 방식으로 접근해야 할 것이다. 예를 들어, 입력 값이 유효하지 않게 되었을 때 키 입력마다 유효성 검증을 한다면 피드백을 실시간으로 전달하기 때문에 입력이 유효해진 순간 사용자에게 알릴 수 있다면 어떨까? 보다 나은 사용자 경험을 제공할 수 있을 것이다.

  
  

✧ 양식 제출 처리 및 사용자 입력 값 가져오기

• 간단한 입력 값을 받는 폼 양식이 있는 SimpleInput 컴포넌트를 사용해서, 사용자의 입력을 받고 그 입력 값에 대한 유효성을 검증하여 에러 메세지를 띄워볼 것이다.

const SimpleInput = (props) => {
  return (
    <form>
      <div className="form-control">
        <label htmlFor="name">Your Name</label>
        <input type="text" id="name" />
      </div>
      <div className="form-actions">
        <button>Submit</button>
      </div>
    </form>
  );
};

사용자의 입력 값 가져오기

• 사용자의 입력 값을 가져오는 방법에는 두가지가 있다. 첫 번째로 useState를 사용해서 모든 키 입력 마다 확인하고 해당 입력 값을 어떤 상태(state) 변수에 저장하는 방법이 있다. 두 번째로는 useRef를 사용해서 사용자가 값을 모두 입력했을 때 사용자의 입력 값을 가져올 수 있는 방법이다.

사용자의 입력 값 가져오기 1. useState

• 먼저, useState를 사용해서 사용자의 입력 값을 가져오는 방법이다.

import { useState } from "react";

const SimpleInput = (props) => {
  const [enteredName, setEnteredName] = useState("");
  ...
}

• useState를 import 하고 컴포넌트 내부에서 호출한다. 해당 상태(state)의 이름은 enteredName으로 지정했다. 해당 상태는 문자열로 받을 것이기에 초기값을 ""로 설정한다.

const nameInputChangeHandler = (event) => {
  setEnteredName(event.target.value);
};

• 이제 enteredName 상태를 업데이트해줄 수 있도록 nameInputChangeHandler 이벤트 트리거 함수를 받고, 상태 업데이트 함수(setEnteredName)에 target.value 값으로 받아올 수 있도록 한다.

  nameInputChangeHandler 함수의 event 매개변수는 event 객체로 받는 것이다. 이것은 자바스크립트가 브라우저에서 작동하는 방식임을 기억하자. nameInputChangeHandler 함수를 input 요소의 onChange에 연결해주고 나면 자동적으로 이벤트를 설명하는 event 객체를 얻을 수 있으며, 이 event 객체를 통해서 입력된 값에 접근할 수 있게 되는 것이다. 즉, event.target.value 는 리액트가 아닌 자바스크립트 문법이며 연결된 input 요소에 이벤트가 발생하면 event.taget 으로ㄹ 접근하여 value 값을 얻을 수 있도록 한다.

<input type="text" id="name" onChange={nameInputChangeHandler} />

• 그리고 입력 값을 받아온 input 요소에 onChange 이벤트로 nameInputChangeHandler 함수를 포인터 해준다.

const formSubmitssionHandler = (event) => {
  event.preventDefault();
};

• 다음으로, 두 번째 함수인 formSubmitssionHandler 을 추가한다. 이 함수는 폼이 제출될 때 작동하는 함수가 될 것이다. 이 함수도 이벤트 객체로 만들 것이기 때문에 매개변수로 event 객체를 받을 수 있도록 작성해준다.

<form onSubmit={formSubmitssionHandler}>...</form>

• 그리고 form 요소에 onSubmit 이벤트로 해당 함수를 연결해준다.

폼에서 event.preventDafult() 를 추가해야 하는 이유

const formSubmitssionHandler = (event) => {
  event.preventDefault();
};

• form 양식을 제출(onSubmit)하는 함수에서 event.preventDafult()를 왜 추가해야만 하는 걸까? 왜냐하면 여기서는 브라우저에서 작동하는 바닐라 자바스크립트를 다루고 있기 때문이다. 기본적으로 브라우저는 폼 안에 있는 버튼을 통해서 폼 양식을 제출(onSubmit)하게 되면, 웹사이트를 제공하는 서버로 HTTP 요청을 보내게 된다. 이 과정은 모두 자동적으로 이루어지는 것이기에 실제로 현 시점에서 우리의 어플리케이션에서는 HTTP 요청을 처리할 서버가 없는 상태이고 HTML과 자바스크립트만 전송하는 정적 서버만 있는 상태이면 이 자동화 과정은 큰 문제가 된다. 따라서 이 문제가 발생되기 전에 event.preventDafult()를 통해서 자동적으로 요청이 보내지지 않도록 해야한다.

• 결론적으로, event.preventDafult()가 필요한 이유는 이를 사용하지 않고 폼을 제출하게 되면 자동적으로 브라우저에서 HTTP 요청이 보내게 되면서 결국 페이지가 새로고침 될 것이고, 이는 리액트 어플리케이션이 전부 재시작된다는 것에 있다. 리액트 어플리케이션이 재시작 되면서 우리가 넣어둔 상태(state)들은 초기화될 것이고, 원하는 대로 작동하지 않을 확률이 높다. 그렇기 때문에 폼 양식을 제출할 때에는 event.preventDafult()를 통해서 브라우저의 기본 과정인 HTTP 요청을 보내지 않도록 명령해줘야 한다.

const formSubmitssionHandler = (event) => {
  event.preventDefault();

  console.log(enteredName);
};

• 저장하고, 버튼을 눌러 폼을 제출해보면

• 내가 input 요소에 입력한 값이 그대로 콘솔에 출력되고 있음을 확인할 수 있다.

사용자의 입력 값 가져오기 2. useRef

• 사용자의 입력 값을 가져오는 또 다른 방법에는 input 요소에 ref를 설정함으로써 필요할 때 input 요소로부터 값을 '읽어'오는 것이다.

import { useState, useRef } from "react";

const SimpleInput = (props) => {
  const nameInputRef = useRef();
};

• 동일하게 useRef를 import 해온 후, nameInputRef라는 이름으로 useRef를 호출한다.

<input
  ref={nameInputRef}
  type="text"
  id="name"
  onChange={nameInputChangeHandler}
  value={enteredName}
/>

• 값을 읽어올 input 요소에 refprop을 작성하고 nameInputRef를 포인터해준다.

const formSubmitssionHandler = (event) => {
  event.preventDefault();
  console.log("useState :", enteredName);

  const enteredValue = nameInputRef.current.value;
  console.log("useRef :", enteredValue);
};

• 폼이 제출(onSubmit)되면 이 입력된 값(value)을 nameInputRef의 current 속성으로 접근하여 가져올 수 있게 되었다. ref는 항상 current 속성을 갖는 '객체' 이기 때문에 리액트에서 ref는 언제나 current 속성으로 value 값에 접근할 수 있다.

자바스크립트에서 input 요소는 자바스크립트의 객체처럼 작동하며, input 요소는 항상 value 라는 속성을 가지고 있다.

• 저장하고, input 창에 무언가를 입력한 뒤 버튼을 눌러 폼 양식을 제출해보면

• 콘솔에서 각각의 방법으로 입력 값을 받아오는 값들이 출력되고 있음을 확인할 수 있다.

결론

• 실제로는 앞서 이 두가지 방법은 동시에 사용하지 않으며, 둘 중에 하나만 선택해서 사용하게 될 것이다. 그렇다면 둘 중에 어떤 것을 사용해야만 할까? 이는 입력된 값으로 어떤 일을 처리할 것인지에 달려있다. 만약 입력 값이 폼이 제출되었을 때 딱 한 번만 필요하다면 모든 키 입력마다 상태(state) 값을 업데이트하기엔 조금 지나칠 것이기에 ref를 사용하는 게 더 나을지도 모른다. 반면 즉각적으로 유효성 검증을 해야만 한다면, 그러니까 키 입력 마다 입력 값이 필요하다면 ref 로는 해당 작업을 할 수 없기 때문에 상태(state)를 이용하는 게 더 나을 것이다. 또한 입력된 값을 초기화 할 때도

ref

nameInputRef.current.value = "";

useState

setEnteredName("");

• 상태(state)를 이용한다면 상태 업데이트 함수를 사용해서 간단하게 빈 문자열로 초기화시켜줄 수 있다. 물론 ref도 이와 동일하게 출력할 수 있는 방법이 있지만 바람직한 방법은 아니다. 직접적으로 DOM을 조작하는 방식이고 자바스크립트 코드를 이용해서 DOM을 직접 조작하는 것은 지양해야하는 방식이기 때문이다. 우리는 리액트로만 DOM을 조작해야 하고, ref를 통해서 입력 값을 초기화하는 방식은 결코 좋은 방법이라 할 수 없을 것이다.

✦ 출처

---

🚨 해당 포스팅은 Udemy의 ⌜React 완벽 가이드⌟ 강의를 베이스로 한 기록입니다.
✍🏻 강의 git repo 바로가기