제어 컴포넌트와 비제어 컴포넌트

제어 컴포넌트

• 제어 컴포넌트는 form의 사용자 입력값을 제어 컴포넌트가 제어하는 것을 말한다.
• 데이터 관리를 react에서 한다.
• state onChange로 값을 관리하기 때문에 input에 값을 입력할 때마다 데이터가 갱신되고, 리렌더링이 발생한다.

Code

function App() {
  const [inputValue, setInputValue] = useState("");
  return (
    <form>
      <label htmlFor="test">input : </label>
      <input
        name="test"
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
    </form>
  );
}

비제어 컴포넌트

• 비제어 컴포넌트는 form의 사용자 입력값을 제어하지 않는다.
• 데이터 관리를 DOM에서 한다.
• 따로 state를 관리하지 않기 때문에 값을 입력할 때 리렌더링이나 데이터가 갱신되지 않는다.
• 특정 구간에 DOM에서 데이터를 갱신한다

Code

function App() {
  const inputRef = useRef();
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(inputRef.current.value);
  };
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="test">input : </label>
      <input name="test" type="text" ref={inputRef} />
    </form>
  );
}

상황에 따른 비교

• 제어 컴포넌트는 값이 변경될 때마다 데이터가 갱신되기 때문에 즉각적인 유효성 검사가 된다는 점이 장점이다.
• 비제어 컴포넌트는 즉각적인 유효성 검사는 못하지만 값이 변경되더라도 불필요한 렌더링이 되지 않기 때문에 즉각적인 데이터 반영이 필요하지 않는 컴포넌트에서 사용하기 좋다.

참고

https://www.youtube.com/watch?v=PBgQKK6nelo
[10분 테코톡] 세인의 제어 컴포넌트와 비제어 컴포넌트를 참고하여 작성하였습니다.