input data 를 관리하는 3가지 방법

 

1. 순수하게 input 만을 이용한 version. without any modules

 

ModalTemp.js -> onChange 를 사용해서 상단으로 넘겨줘서 onSave로 넘긴 데이터 사용.

<label form={'test'}>테스트</label>
<input
    type={'text'}
    id={'test'}
    name={'test'}
    size="10"
    onChange={(e) => onSave(e)}
/>
<label form={'test2'}>테스트2</label>
<input
    type={'text'}
    id={'test2'}
    name={'test2'}
    size="10"
    onChange={(e) => onSave(e)}
/>

 

index.js -> 자식컴포넌트에서 받아온 data를 내가 저장할때 필요한 data 틀을 useState를 이용해서 만들어서 넣어준다

const [regist, setRegist] = React.useState({ test: '', test2: '' });

const registerHspt = (data) => {
    setRegist({
        ...regist,
        [e.target.name]: e.target.value,
    });
    .
    .

 

 

2. ModalTemp.js -> TextField(mui) custom한 component 이용한 version

<h5>병원명</h5>
<InputTemp width={true} onChange={onSave} name={'hsptNm'} />

 

 

3. useForm 사용한 version.

 

ModalTemp.js -> register를 이용해서 내가 넘기는 데이터를 하나의 object로 자동변환하고 onChange, ref, name 의 기능을 하나로 묶어서 사용. 그러나 register는 input에서 사용가능하기에 register자체를 input component로 넘겨준다. 

하나의 module만 사용한 것이 아니라 index - modal - input 으로 이어지는 3depths 에서 두가지 이상의 module을 같이 사용하는 것이라 데이터를 어떤식으로 연결하냐는 방법을 알아내는 것이 가장 중요하다. 

const { handleSubmit, register } = useForm({
    defaultValue: initializeInput,
});

<h5>병원명</h5>
<InputTemp width={true} register={register} inputName={'hsptNm'} />
<h5>연락처</h5>
<InputTemp
    width={true}
    register={register} //register는 input에서 사용하는 것이니까 input으로 register자체를 보내줘야한다. 여기서 쓰는게 아니라....
    inputName={'hsptContact'}
    text={'하이픈(-)없이 기록하세요.'}
/>

 

inputTemp.js -> register를 받았지만 모든 input에서 사용하는 것은 아니고 form에 속해있는 input만 register가 필요한 것이므로 하나씩 떼어서 prop으로 보내주고, object를 만들어서 사용한다.

내 경우에는 mui 의 TextField를 사용했기때문에 https://v4.mui.com/api/text-field/ 공식문서에 나오는 props 를 살펴보고 그 안에 속해있으면서 register와 연동이 될 수 있는 props를 찾아서(inputRef, onChange, name) input prop으로 넘겨줬다. 

조건식으로 register 가 없을시 내가 만들어놓은 틀을 이용하라고 명시한다. 

const InputTemp = ({ width, text, type, change, inputName, inputRef, register, ...rest }) => {
    const o = {
        onChange: change,
        name: inputName,
        ref: inputRef,
    };

    const { onChange, name, ref } = register ? register(inputName) : o;

    return (
        <>
            <TextField
                size={'small'}
                className={'pr-2, text-xs, mb-2'}
                placeholder={text}
                variant="outlined"
                fullWidth={width}
                onChange={onChange}
                name={name}
                inputRef={ref}
                {...rest}