구조 및 문제

구조

일단 나의 구조는 input에 세팅되는 값은 부모에서 받아오는 값이다.
그리고 input box 세팅은 자식에서 해준다.

문제

수정하는 화면의 input box에 기존 값을 가져오고
onChangeHandler를 이용해 변환된 값을 표출시키는 과정에서 아무리해도 부모의 값이 바뀌지 않는 문제가 있었다.

원인을 먼저 말하자면 input의 value값을 부모의 값으로 세팅해서 그렇다.
그래서 아무리 바꾸려고 해도 부모의 값이 바뀌지않았다.

해결

🥕원래의 값을 바로 input의 value의 값에 세팅하는 것이 아닌 useEffect를 이용하여 부모값을 세팅해주고 변경되는 값을 상태관리는 하는 것이 포인트다.

const children = (props) => {
    // userId 상태관리
    const [data, setData] = useState({
        userId: null
    });

    // 기존 부모의 값 세팅
    useEffect(() => {
        if (props.data) { // 부모에 값이 있다고 가정
            setData(prevState => ({
                ...prevState,
                userId: props.data.userId
            }));
        }
    }, [props.data]);

    // userId 값을 바꾸는 이벤트
    const onChangeHandler = useCallback((type, event) => {
        setData(prevState => ({
            ...prevState,
            [type]: event.value
        }))
    }, [data]);


    return (
        <Fragment>
            <div>
                <div>
                    <Input
      					onChange={(event) => onChangeHandler("userId", event)}
                        value={data.userId} // 여기의 값을 props.data.userId로 하면 input 값이 안바뀜
                    />
                </div>
            </div>
        </Fragment>
    );
};