[React] 제어 컴포넌트 / 비제어 컴포넌트

React 공식문서를 보면 제어 컴포넌트와 비제어 컴포넌트에 관한 얘기가 나온다.

제어 컴포넌트

HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.

우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.

출처 : https://ko.reactjs.org/docs/forms.html#controlled-components

말이 좀 어려울 수 있긴하지만 중요한 부분은

"엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다."

이부분이다.

import styled from "styled-components";
import React, {useState} from "react";

const Root = styled.div`

`;

export default function Home() {

    const [input, setInput] = useState('');

    const onChangeHandle = (e) => {
        setInput(e.target.value);
        console.log("input : " + input);
    }

    return (
        <Root>
            <input
                onChange={e => onChangeHandle(e)}
                value={input}
            />
        </Root>
    )
}

쉽게 설명하자면 위의 코드에서 input 창에 abcdef 를 입력하면 아래 사진처럼 input 값이 변경 될 때마다 input state 값이 업데이트 되는것이다.

제어컴포넌트의 쓰임새는 주로 유효성검사에 많이 쓰인다.

비제어 컴포넌트

제어 컴포넌트에서 데이터는 React 컴포넌트에서 데이터가 다뤄지는거에 반해 비제어 컴포넌트는 DOM 자체에서 폼 데이터가 다루어진다.

비제어 컴포넌트에서는 버튼을 누르는 최종적인 상황에서만 input의 value에 접근하므로 리렌더링이 계속해서 발생하진 않는다. 하지만 그만큼 비제어 컴포넌트는 사용자 입력의 가장 최신 값에 접근하기 힘들다는 특성이 있다.

결론

제어 컴포넌트와 비제어 컴포넌트중에 뭐가 좋다 나쁘다의 문제가 아니고 적절한 곳에 맞춰서 사용을 하면 된다.