Controlled & UnControlled Component

엘리먼트의 '상태' 를 누가 관리하느냐

상태를 가지고 있는 엘리먼트 ex) input, select, textarea ...

https://reactjs.org/docs/forms.html

1. 엘리먼트를 가지고 있는 컴포넌트가 관리
   • Controlled
2. 엘리먼트의 상태를 관리하지 않고, 엘리먼트의 참조만 컴포넌트가 소유
   • Uncontrolled

예시) ControlledComponent.jsx

import {useState} from "react";

const ControlledComponent = (props) => {
    const [value, setValue] = useState("");
    const handleOnchange = (e) => {
        const {target} = e;
        console.log(target.value);
        setValue(target.value);
    };

    const handleOnClick = (e) => {
        console.log(value);
    };

    return (
        <div>
            <input value={value} onChange={handleOnchange}/>
            <button onClick={handleOnClick}>전송</button>
        </div>
    );
}

export default ControlledComponent;

예시) UncontrolledComponents.jsx

import {useRef} from "react";

const UncontrolledComponents = (props) => {
    const inputRef = useRef();
    const handleClick = (e) => {
        // Input 엘리먼트의 현재 상태 값 (value)를 꺼내서 전송한다.
        // const input = document.querySelector("#my-input");
        // console.log('input', input);
        console.log('inputRef current value', inputRef.current.value)
    }

    return (
        <div>
            <input ref={inputRef}/>
            <button onClick={handleClick}>전송</button>
        </div>
    );
}

export default UncontrolledComponents;

결론 :
React, Vue등의 가상돔을 이용할 경우 직접 document 엘리먼트에 접근하는 방법을 지양하고있다. 따라서 state의 값에 대한 처리를 하는 방식을 사용한다면 Controlled 방식을 그게아니라 직접 document를 참조하는 방식을 사용한다면 useRef를 통해 unControlled 방식으로 구현하는 부분이 유용하다. React 가이드 상 지향하는 바