react에서 form 다룰때 특징

1. js에서 사용하던를 사용하지 못한다.
   그대신 submit handler 함수에서 event객체의 e.preventDefault를 이용한다.
2. controlled component vs uncontrolled component

controlled component vs uncontrolled component

controlled component

HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.

-React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼을 제어 컴포넌트라고 부른다.
리엑트 폼

controlled component 예제

export default function ControlledComponent() {
    const [name, setName] = useState('');
    const [essay, setEssay] = useState('Please write an essay about your favorite DOM element.');
    const [flavor, setFlavor]  = useState('coconut');

    const handleChange = (e) => {
        setName(e.target.value);
    }
    const handleEssayChange = (e) => {
        setEssay(e.target.value);
    }
    
    const handleFlavorChange = (e) => {
        setFlavor(e.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        alert(`name : ${name}, essay : ${essay}, flavor : ${flavor}`);

    }

    return (
    <form onSubmit={handleSubmit}   >
        <label htmlFor="" >Name:
        <input type="text" value={name} onChange={handleChange} />
        </label>
        <br/>
        <label htmlFor="" onSubmit={handleSubmit}>Essay:
        <input type="text" value={essay} onChange={handleEssayChange} />
        </label>
        <br/>
        <label>Pick your favorite flavor:
            <select value={flavor} onChange={handleFlavorChange}>
                <option value="grapefruit">Grapefruit</option>
                <option value="lime">Lime</option>
                <option value="coconut">Coconut</option>
                <option value="mango">Mango</option>
            </select>
        </label>
        <br/>
        <input type="submit" value="Submit"/>
        
    </form>
    );
}

input의 value를 state로 관리함으로서 element의 value는 항상 React state에 의해 결정됩니다. 코드를 조금 더 작성해야 한다는 의미이지만, 다른 UI 엘리먼트에 input의 값을 전달하거나 다른 이벤트 핸들러에서 값을 재설정할 수 있습니다.

uncontrolled component

-읽기 전용 content들을 보통 비제어 컴포넌트로 다룬다.
예를 들어 file과같은 element는 값이 읽기 전용이기 때문에 React에서는 비제어 컴포넌트이다.

uncontrolled component 예제

 export default function UnControlledComponent() {

    //ref를 사용할경우 뒤에 Ref를 붙여주는게 좋다 얘가 변수가아니라 reference라는 것을 인식할 수 있기 때문이다.
    const fileInputRef = useRef(null);

    const handleSubmit = (e) => {
        e.preventDefault();
        //input box의 value가 뭔지 react에서는 모르는데 ref를 줌으로서 component가 가진값이 ref에 담겼다는 것이다.
        //file여러개중에 0번째의 이름
        alert(`selected file ~ ${fileInputRef.current.files[0].name}`)

    }
    
  return (
    <form onSubmit={handleSubmit}>
        <br/>   
            <label>Upload file : <input type="file" ref={fileInputRef} />
            </label>
            <br/>
            <button type="submit"> filesSubmit</button>
        </form>
  )
}