React Hooks 및 useState를 사용하여 양식 리팩터링

소개

React Hooks는 나중에 살펴보기로 결정한 것 중 하나입니다. 나는 그것에 대해 훌륭한 것들을 읽고 들었고, 그래서 나는 지금입니다. 후크를 사용하여 리팩토링할 수 있다고 생각하는 형식의 구성 요소가 있었기 때문에 그것으로 시작했습니다. 항상 작은 단계로 시작하는 것이 더 쉽습니다.

전에

멋진 것은 없습니다. material-ui 프레임워크를 사용하여 Dialog 구성 요소를 만듭니다. 그런 다음 그 안에 3개의 TextField(텍스트 입력)가 있습니다.

export default class AddItemPopup extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            name: '',
            quantity: 0,
            unitCost: 0
        }
    }

    handleInputChange = e => {
        const {name, value} = e.target
        this.setState({
            [name]: value
        })
    }

    addItem = () => {
        const {name, quantity, unitCost} = this.state

        if(!name || !quantity || !unitCost) return

        this.props.saveItem(this.state)
    }

    render(){

        const {open, closePopup} = this.props
        const {name, quantity, unitCost} = this.state
        return(
            <Dialog 
                open={open}
                onClose={closePopup}>
                <DialogTitle>Add new item</DialogTitle>
                <DialogContent>
                    <TextField 
                        name='name'
                        label='Item name/Description'
                        onChange={this.handleInputChange}
                        value={name}/>
                    <TextField 
                        name='quantity'
                        label='Quantity'
                        onChange={this.handleInputChange}
                        value={quantity}/>
                    <TextField 
                        name='unitCost'
                        label='Unit Cost'
                        onChange={this.handleInputChange}
                        value={unitCost}/>
                </DialogContent>
                <DialogActions>
                    <Button onClick={closePopup} color="secondary" variant="contained">
                        Cancel
                    </Button>
                    <Button onClick={this.addItem} color="primary" variant="contained">
                            Save
                    </Button>
                </DialogActions>
            </Dialog>
        )
    }
}

파일 맨 위에 가져오기를 저장했지만 아이디어를 얻었습니다. 양식 입력 값을 추적하기 위한 양식 및 상태가 있는 클래스 구성 요소. 이제 useState 후크를 사용하여 이 구성 요소를 다시 작성해 보겠습니다.

// Import the hook first
import React, {useState} from 'react'

const AddItemPopup = ({
    open, 
    closePopup,
    saveItem
}) => {

    const handleInputChange = e => {
        const {name, value} = e.target
        setValues({...values, [name]: value})
    }

    const addItem = () => {
        const {name, quantity, unitCost} = values

        if(!name || !quantity || !unitCost) return

        saveItem(values)
    }
        // Declare our state variable called values
        // Initialize with our default values

    const [values, setValues] = useState({name: '', quantity: 0, unitCost: 0})
    return(
        <Dialog 
        open={open}
        onClose={closePopup}>
        <DialogTitle>Add new item</DialogTitle>
            <DialogContent>
                <TextField 
                    name='name'
                    label='Item name/Description'
                    onChange={handleInputChange}
                    value={values.name}/>
                <TextField 
                    name='quantity'
                    label='Quantity'
                    onChange={handleInputChange}
                    value={values.quantity}/>
                <TextField 
                    name='unitCost'
                    label='Unit Cost'
                    onChange={handleInputChange}
                    value={values.unitCost}/>
            </DialogContent>
            <DialogActions>
                <Button onClick={closePopup} color="secondary" variant="contained">
                    Cancel
                </Button>
                <Button onClick={addItem} color="primary" variant="contained">
                        Save
                </Button>
            </DialogActions>
        </Dialog>
    )
}

export default AddItemPopup

팔! 우리의 컴포넌트는 이제 함수가 되었습니다. 우리는 무엇을 했습니까?

useState는 두 가지를 반환합니다. 현재 상태( 여기에서는 values ​​)와 이를 업데이트할 수 있는 함수( 여기서는 setValues ​​)

useState는 초기 상태라는 하나의 인수를 취합니다.

onChange 핸들러 함수는 이제 이 setValues ​​함수를 사용하여 구성 요소의 내부 상태를 수정합니다. 보시다시피 values ​​변수는 구성 요소가 있는 모든 곳에서 액세스할 수 있습니다.

참고: 우리는 세 가지 다른 후크를 사용하여 각 입력을 개별적으로 업데이트할 수 있습니다. 여러분이 더 읽기 쉽다고 생각하는 것이 무엇이든 간에 ;)