제어/비제어 컴포넌트

제어 컴포넌트

React에 의해 값이 제어되는 입력 폼 엘리먼트.

(react와 상태가 연결되어 있는지 확인!)

const ControlComponent = (props) => {
    const [enteredUserNm, setEnteredUserNm] = useState("");
    const [enteredUserAge, setEnteredUserAge] = useState("");

    ....

    const onChngNameHandler = (e) => {
        setEnteredUserNm(e.target.value);
    };

    const onChngAgeHandler = (e) => {
        setEnteredUserAge(e.target.value);
    };

    return (
        <React.Fragment>
        <input
            type="text"
            id="username"
            onChange={onChngNameHandler}
            value={enteredUserNm}
        />
        <input
            type="number"
            id="age"
            onChange={onChngAgeHandler}
            value={enteredUserAge}
        />
        </React.Fragment>
    )
}

비제어 컴포넌트

ref를 사용하여 DOM에서 폼 값을 가져와 DOM 자체에서 폼 데이터가 다루어지는 경우.

(react를 통해서 요소의 상태를 제어하지 않음)

const RefPractice = (props) => {
    const nameInputRef = useRef();
    const ageInputRef = useRef();

    ....

    const test = () => {
        nameInputRef.current.value = ""
        ageInputRef.current.value = ""
    }

    return (
        <React.Fragment>
            <input
                type="text"
                id="username"
                value={enteredUserNm}
                ref={nameInputRef}
            />
            <input
                type="number"
                id="age"
                value={enteredUserAge}
                ref={ageInputRef}
            />
        </React.Fragment>
    )
}

보통은 제어 컴포넌트를 사용하는게 대다수...