[React] form input value 상태관리

Issue

기존의 사용자 정보를 부모로부터 전달받아와서 form의 input value에 props의 값을 셋팅하고 변경이 일어나면 자식 state에서 데이터를 관리하는 부분에서 문제가 발생했다.😥

입력 폼에서 데이터를 변경하기 위해서 먼저 사용자의 기본 정보를 불러와 input value에 셋팅을 한 뒤 input 값을 변경했을 때, 데이터에 대한 변경이 전혀 일어나지 않았다.

원인

• 부모로부터 전달받은 데이터를 바로 input value 에 셋팅하고 있었기 때문에 데이터 변경이 일어나면 당연히 부모 props는 변경되지 않는다.

[문제 코드]

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>
    );
};

🥕 해결

• 부모로부터 전달받은 데이터는 useEffect() 함수를 이용해서 데이터를 가져올 때마다 자식의 state에 데이터를 세팅해준다. 그래야 자식에서 변경되는 input 값의 상태관리가 가능해지기 때문이다.

[최종 코드]

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>
    );
};