React | Uncontrolled Components

Controlled Components와 Uncontrolled Components

In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

 

Controlled Compoents는 DOM(<input>, <testarea>와 같은)의 값(value)를 state에 유지하고, 사용자가 값을 변경할 때 마다 state도 변경된다.
아래 코드에서 name이라는 상태값을 만들고, onChange, 즉 사용자가 값을 변경할 때 마다 name상태값도 계속 변경된다.
Controlled Components의 form data는 리액트 컴포넌트에 의해 제어된다.

function ControlledComponent () {
    const [name, setName] = useState("");

    function handleOnChange(e) {
        setName(e.target.value);
    }

    function handleSubmit(e) {
        e.preventDefault();
        console.log(name);
    }

    return (
        <form onSubmit={handleSubmit} >
             <input type="text" value={name} onChange={handleOnChange}/>
        </form>
    )
}

UnControlled Components는 ref를 사용해서 DOM의 값을 그대로 가져온다.

function UnControlledComponent () {
    const inputRef = useRef(null);

    function handleSubmit(e) {
        e.preventDefault;
        console.log(inputRef.current.value);
    }

    return (
        <form onSubmit={handleSubmit}>
                <input type="text" defaultValue="hi" ref={inputRef} />
        </form>
    )
}

 

Controlled Component는 대부분의 상황에서 사용된다. 특히 입력 중에, 동적으로 제어해야 할 경우 유용하다.

• 사용자가 필수 입력 칸을 모두 채웠는지 확인 후 제출 버튼이 활성화되게 해야할 때
• 사용자의 입력 중 유효성 검사를 해야할 때
• 입력 값이 다른 입력 값에 의존할 때

UnControlled Component는 동적으로 제어할 필요는 없는 상황에서 좋다.

• 마지막에 제출 버튼을 누르기만 하면 될 때
• 제출 버튼을 누른 후 유효성 검사를 할 때

 

---

What are React controlled components and uncontrolled components?
Controlled and uncontrolled form inputs in React don't have to be complicated