[React] - 폼 처리

폼 처리 : 폼 요소의 상태를 관리하고 사용자 입력에 따라 반응하는 방법
일반적으로 onChange 이벤트 핸들러를 통해 사용자의 입력을 상태에 연결한다.
    onSubmit 이벤트 핸들러를 통해 폼 제출 시 실행할 작업을 정의한다.
일반적으로 폼 처리는 이벤트 핸들러랑 상태로 한다.

1) 클래스형 컴포넌트에서의 폼 처리

class NameForm extends Component {
    constructor(props) {
        super(props);
        this.state = {value : ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
        ; event.target.value 는  이벤트가 발생한 요소(target)인 입력 필드의 값(value)
    }

    handleSubmit(event) {
        alert('A name submit: ' + this.state.value);
        event.preventDefault();
        ; 기본 동작을 취소하는 역할
        ; 폼을 제출하면 기본적으로 페이지가 다시 로드 or 새로고침
    }

    render() {
        return(
            <form onSubmit={this.handleSubmit}>
                <label>Name: 
                    <input type = "text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type = "submit" value="submit" />
            </form>
        );
    }
}

2) 함수형 컴포넌트에서의 폼 처리 : Hooks

useState Hook, onChange, onSubmit

import React, {useState} from 'react';

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

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

    const handleSubmit = (event) => {
        alert('A name submit: ' + value);
        event.preventDefault();
    }

    return (
        <form onSubmit={handleSubmit}>
            <lable>Name: 
                <input type="text" value={value} onChange={handleChange} />
            </label>
            <input type="submit" value="submit" />
        </form>
    );
}

자바스크립트 모듈 시스템에서 export와 import는 모듈 간에 기능을 공유하기 위해 사용되는 키워드다.

- export : 현재 모듈에서 정의된 함수, 객체, 값 등을 다른 자바스크립트 파일에서 사용할 수 있도록 공개합니다.
- import : 다른 자바스크립트 파일에서 export된 기능을 가져오기 위해 사용한다.
- export default : 모듈당 하나만 가능한 기본 내보내기, default로 내보낸 값은 {} 없이 import 할 수 있다.


- 아이템 추가 : 아이템을 추가하기 위해서는 기존 배열을 변경하는 것이 아니라, 새로운 배열을 생성하고 이를 State로 관리해야한다.

const [iemt, setItems] = useState(['Apple', 'Banana', 'Kiwi']);

const addItem = () => {
    const newItem = prompt('Enter a new item: ');
    if(newItem) {
        setItems([...items, newItem]);
    }
};

const removeItem = (index) => {
    const updateItem = items.filter((_, i) => i !== index);
    setItems(updateItem);
};