🔹 Form

<input>, <textarea> , <select>
=> 태그 자체로 사용자 입력 기반으로 데이터를 가지고 있는 태그들

🔹 제어 컴포넌트 vs 비제어 컴포넌트

🔹 제어 컴포넌트

• 사용자의 입력을 받는 컴포넌트에 event 객체를 이용해 setState() 로 값을 저장하는 방식이다.
• 액션을 취할 때 마다 리렌더링을 발생한다.
• 제어 컴포넌트의 값은 항상 최신값을 유지한다.
• 데이터와 UI에서 입력한 값이 항상 동기화 된다.
• 불필요한 api요청으로 인한 자원 낭비 문제 발생된다. (막기 위해선 스로틀링 디바운싱 사용)

제어컴포넌트의 사용 예시

• 유효성검사
• 유효한 데이터가 없는 경우 전송 버튼의 상태를 disabled로 표시
• 신용카드와 같은 특정 입력 방식 적용

import React ,{useState} from 'react'

function SimpleForm() {
 const [userInputs, setUserInputs] = useState({
     nickname: "",
     password: ""
 })
 console.log(userInputs)


    const handleChange = (e) => {
        setUserInputs({...userInputs,[e.target.name] : e.target.value})
    };

    const handleSubmint = (e) => {
        e.preventDefault()
        const { nickname, password} = userInputs
        alert(`nickname:${nickname}, password:${password}`)
    };


  return (
    <fieldset> 제어 
    <form onSubmit={handleSubmint}>
        <label>닉네임 :</label>
        <input type ="text" name = "nickname" value={userInputs.nickname} onChange = {handleChange}></input>
        <br></br>
        <label>패스워드 :</label>
        <input type ="text" name = "password" value={userInputs.password} onChange = {handleChange}></input>
        <input type ="submit" value="제출" />
    </form>
    </fieldset>
  )
}

export default SimpleForm  

🔹 비제어 컴포넌트

• ref를 사용해서 값을 얻는다. 실시간으로 값이 동기화 되지 않고 리렌더링도 되지 않는다.
• 값을 트리거 해야 값을 얻을 수 있다.
• submit 버튼을 클릭해 트리거 하기 전까지는 값이 변경되지 않는다.

import { useRef } from "react";
import React  from 'react'

function UnControlledForm() {

  const inputRef = useRef();
  
    function handleSubmit(e)
    {
        e.preventDefault()
        alert(`nickname: ${inputRef.current.value}`);
    }
  return (
    <fieldset> 비제어 <form onSubmit={handleSubmit}>
    <label>닉네임 : </label>
    <input type = "text" name="nickname" ref={inputRef} />
    <input type = 'submit' value="제출"></input>
    </form>
    </fieldset>

  )   
}
export default UnControlledForm

🔹 제어 컴포넌트와 비제어 컴포넌트 비교

제어 컴포넌트 vs 비제어 컴포넌트

기능	제어 컴포넌트	비제어 컴포넌트
일회성 정보 검색(ex: 제출)	O	O
제출 시 값 검증	O	O
실시간으로 필드값의 유효성 검사	O	X
조건부로 제출 버튼 비활성화	O	X
실시간 입력 형식 적용	O	X
동적 입력	O	X

실시간으로 값 받아야 할 경우 => 제어 컴포넌트
제출시에만 값 필요할 경우 => 비제어 컴포넌트
사용용도에 따라서 제어와 비제어를 선택해서 사용하면 될 것 같다.