[족쇄 2.0] React controlled Form vs uncontrolled Form

알아야하는 이유

1. input을 사용해서 입력을 받을 때 우리가 평소 사용하는 state를 이용한 방식과 vanila 방식이 있다는 것을 알 수 있다.
2. submit을 좀 더 잘 올바르게 사용할 수 있다.
3. state를 사용했을 때 submit이 의미가 없는 이유를 알 수 있다.
4. 어떤 방식이 유리한 경우인지 상황에 맞춰서 2가지 방법 중 골라 쓸 줄 알아야 한다.

 

Controlled Form이란?

input의 사용을 더 잘 알 수 있을 것이라고 상단에 이유에 대해서 기술했지만 사실  <from /> 와 좀 더 깊은 연관이 있다.

controlled,  이는  state을 사용해서 input에서 입력받은 값을 어떻게 변경하고 저장해서 우리가 나타내고 사용하는 방식이고 우리가 흔히 알고 있는 방식이다. 

import React, { useState } from 'react';

function ControlledForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = () => {
    // no "submit event" param needed above ^
    sendInputValueToApi(value).then(() => /* Do something */)
  };

  return (
    <>
      <input type="text" value={value} onChange={handleChange} />   
      <button onClick={handleSubmit}>Send</button>
    </>
}

위와 같이 사용하는 것이 올바른데 나는 여기다가도 <from /> 을 사용해서 쓸 데없는 행동은 한 적도 있는 것 같다. 이와 같은 state를 사용한 것의 이점은 상태를 관리하기 쉽다는 것과 validation 등 사용자가 입력한 값에 대한 접근이 용이하다는 것이 있기에 우리가 흔히 사용하는 방식이라고 생각하면 된다.

 

그리고 최근 트렌드는 object로 state를 하나만 써서 관리하는 것이 트렌드이긴 한가보다

const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    address: "",
    // ... potentially many more individual properties
  });

 

Uncontrolled Form이란?

쉽게 말해서 state를 사용하지 않는 방식을 말하며 vanila 방식이라고 생각하면 된다.

function UncontrolledForm() {

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

    const formData = new FormData(event.target);
    const inputValue = formData.get('inputName');

    sendInputValueToApi(inputValue).then(() => /* Do something */)  
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="inputName" />
      <button type="submit">Send</button>
    </form>
  );
}

장점으로써는 re-rendering이 잦게 일어나는 controlled 방식과는 다르게 submit시에 일어나는 것 외에는 re-rendering에 신경을 안써도 되지만 보는 바와 같이 접근이 그렇게 편해보이지 않기 때문에 validation이나 활용부분에서 골치 아플 것 같아 보인다. 하지만 실제 return 내용이 controlled 에 비해 간결하기에 가독성이 조금 더 좋은 부분이 있는 것 같다.

 

Mix Controlled &Uncontrolled

 그렇다고 굳이 둘 중 하나만 고집해야하는 것도 아니다 보는 바와 같이 섞어서 사용하면 더욱 좋은 효과를 줄 수 있고 그 중에서도 controlled 되는 부분을 따로 컴포넌트로 작성해서 사용한다면 re-rendering부분에서도 크게 개선을 할 수 있기때문에 이러한 방식으로 하는 것을 지양하며 사용해 보자.

const PhoneInput = () => {
  const [phoneNumber, setPhoneNumber] = useState("");

  const handlePhoneNumberChange = (event) => {
    // Some function to format the phone number
    const formattedNumber = formatPhoneNumber(event.target.value);
    setPhoneNumber(formattedNumber);
  };

  return (
    <input
      type="tel"
      name="phoneNumber"
      value={phoneNumber}
      onChange={handlePhoneNumberChange}
    />
  );
};

function MixedForm() {
  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);
    for (let [key, value] of formData.entries()) {
      console.log(`${key}: ${value}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>Name:</label>
      <input type="text" name="name" />

      <label>Email:</label>
      <input type="email" name="email" />

      <label>Phone Number:</label>
      <PhoneInput />

      <label>Address:</label>
      <input type="text" name="address" />

      <button type="submit">Submit</button>
    </form>
  );
}

// Helper function for phone number formatting (just an example)
function formatPhoneNumber(number) {
  // Format the phone number as desired. This is just a basic example.
  return number.replace(/\D/g, "").slice(0, 10);
}

 

아래 링크로 들어가면 더 자세한 내용을 알 수 있고 매일마다 조금씩 이해한 부분을 추가적으로 써넣을 예졍이다~ ㅎㅎ

 

https://dev.to/ajones_codes/a-better-guide-to-forms-in-react-47f0

A Better Guide To Forms in React