inputstate

controlled component와 uncontrolled component의 차이를 설명해 주세요

예상 시간
6분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

controlled component의 source of truth는 어디인가요?

부가 설명

function ControlledInput() {
  const [name, setName] = useState("");
 
  return <input value={name} onChange={(event) => setName(event.target.value)} />;
}

이 경우 input 값은 name state가 결정합니다.

function UncontrolledInput() {
  const inputRef = useRef(null);
 
  function handleSubmit() {
    console.log(inputRef.current.value);
  }
 
  return <input ref={inputRef} />;
}

이 경우 입력 중인 값은 DOM이 가지고 있고, 필요할 때 읽습니다.

controlled와 uncontrolled는 어느 하나가 항상 정답이라기보다, form의 복잡도와 값이 필요한 시점에 따라 선택합니다. 검색창처럼 입력할 때마다 결과를 바꾸거나 validation을 즉시 보여줘야 하면 controlled가 자연스럽습니다. 반면 입력값을 제출 때만 읽으면 되는 간단한 form은 uncontrolled도 충분합니다.

중요한 건 한 input을 controlled였다가 uncontrolled로 바꾸거나 반대로 바꾸지 않는 것입니다. React warning이 나오고 값 흐름이 꼬일 수 있습니다.

한 줄 정리

controlled는 React state가 값을 관리하고, uncontrolled는 DOM이 값을 관리하며 필요할 때 React가 읽는 방식입니다.