기존의 사용자 정보를 부모로부터 전달받아와서 form의 input value에 props의 값을 셋팅하고 변경이 일어나면 자식 state에서 데이터를 관리하는 부분에서 문제가 발생했다.😥
입력 폼에서 데이터를 변경하기 위해서 먼저 사용자의 기본 정보를 불러와 input value에 셋팅을 한 뒤 input 값을 변경했을 때, 데이터에 대한 변경이 전혀 일어나지 않았다.
[문제 코드]
import React, {Fragment, useCallback, useEffect, useState} from "react";
const children = (props) => {
// input value State관리
const [formData, setFormData] = useState({
userNm: null
});
useEffect(() => {
setFormData(prevState => ({
...prevState,
userNm: formData.userNm
}));
}, [formData]);
// input 변경 이벤트 핸들러
const onChangeHandler = useCallback((type, event) => {
setFormData(prevState => ({
...prevState,
[type]: event.value
}))
}, [formData]);
return (
<Fragment>
<div>
<Input
minLength={2}
maxLength={50}
value={props.data.userNm} // 여기서 문제 발생!
onChange={(event) => onChangeHandler("userNm", event)}
/>
</div>
</Fragment>
);
};
[최종 코드]
import React, {Fragment, useCallback, useEffect, useState} from "react";
const children = (props) => {
// 여긴 자식에서 관리하는 formData State
const [formData, setFormData] = useState({
userNm: null
});
useEffect(() => {
if (props.data) {
setFormData(prevState => ({
...prevState,
userNm: props.data.userNm //부모로부터 받아온 props 데이터를 자식에게 셋팅!!!
}));
}
}, [props.data]); // 부모로부터 받아온 데이터
// input 변경 이벤트 핸들러
const onChangeHandler = useCallback((type, event) => {
setFormData(prevState => ({
...prevState,
[type]: event.value
}))
}, [formData]);
return (
<Fragment>
<div>
<Input
minLength={2}
maxLength={50}
value={formData.userNm} // 자식 state
onChange={(event) => onChangeHandler("userNm", event)}
/>
</div>
</Fragment>
);
};