[💎React] 제어 컴포넌트와 비제어 컴포넌트

리액트 훅 폼 라이브러리를 사용하는데 해당 라이브러리는 비제어 컴포넌트 방식으로 구현되어 있다는 설명이 있었다. 비제어 컴포넌트는 무엇이고, 제어 컴포넌트는 무엇이란 말인가?
오늘은 이것에 대해 공부해보려고 한다.

제어 컴포넌트

리액트 공식문서에 따르면

제어 컴포넌트는 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다.
(중략)
이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.

export default function App() {
  const [input, setInput] = useState("");
  const onChange = (e) => {
    setInput(e.target.value);
  };

  return (
    <div className="App">
      <input onChange={onChange} />
    </div>
  );
}

즉, 사용자의 입력을 받는 컴포넌트에 event 객체를 이용해 setState()로 값을 저장하는 방식을 제어 컴포넌트 방식이라고 한다. 제어 컴포넌트는 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화된다.

비제어 컴포넌트

비제어 컴포넌트는 기존의 바닐라 자바스크립트와 크게 다르지 않는 방식이다. 바닐라에서 폼을 제출하는 버튼을 클릭했을 때 요소 내부의 값을 얻을 수 있었던 것을 생각하면 된다. 비제어 컴포넌트 방식을 사용할 땐 setState()가 아닌 ref를 사용해 값을 얻고, 그 값이 실시간으로 동기화되지 않는다. 만약 A와 B라는 컴포넌트가 있을 때, A에 대한 변화를 즉각적으로 B가 영향을 받아야 할 때 비제어 컴포넌트는 이런 방식에 대한 대응을 할 수 없다.

export default function App() {
  const inputRef = useRef(); // ref 사용
  const onClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div className="App">
      <input ref={inputRef} />
      <button type="submit" onClick={onClick}>
        전송
      </button>
    </div>
  );
}

정리하자면,
제어 컴포넌트의 경우 사용자가 입력을 하는 액션을 취할 때마다 리렌더링을 발생시킨다. 이는 데이터와 UI에서 입력한 값이 항상 동기화됨을 알 수 있다. (항상 최신값 유지)

반면 비제어 컴포넌트의 경우, 필드에서 사용자가 직접 값을 트리거해야 값을 얻을 수 있다. 사용자가 트리거하기 전까지는 리렌더링을 발생시키지도 않고 값을 동기화시키지도 않는다.

제어 컴포넌트는 언제 사용하면 좋을까?

제어 컴포넌트를 사용하기 좋은 방식은 보통 아래 세가지라고 한다.

• 유효성 검사
• 유효한 데이터가 없는 경우 전송 버튼의 상태를 disabled로 표시하기
• 신용카드와 같은 특정 입력 방식 적용하기

주의할 점

사용자가 입력하는 모든 데이터가 동기화되기 때문에, 불필요한 단어 입력시에도 값이 갱신되어 불필요한 리렌더링/api 요청으로 이어질 수 있다.(-> 자원낭비) 이런 불필요한 방법을 막기 위해선 스로틀이나 디바운싱을 사용할 수 있다. (throttle & debounce)

일반적으로 모든 form 요소에서 상태의 동기화가 필요한 건 아니고, form 요소가 증가할수록 모든 컴포넌트에 쓰로틀이나 디바운싱을 걸기는 힘들다. 만약 값이 트리거 된 이후에 갱신이 되어도 문제가 없다면 ref를 사용하는 방식이 불필요한 렌더링을 방지하는 데 더욱 도움이 될 수 있다. 그리고 이렇게 비제어 컴포넌트를 사용해 렌더링을 최적화하는 라이브러리가 react-hook-form 이다.

느낀 점

제어 컴포넌트와 비제어 컴포넌트에 대해 알고나니, 리액트 훅 폼 라이브러리의 유용성에 대해 더 깊이 이해할 수 있게 되었다. 무조건 라이브러리 제일 유명한 거만 찾아서 쓸 게 아니라 거기에 담긴 철학이나 필요성에 대해 공부하고, 내가 주체적으로 생각하는 게 중요하구나 라고 다시 한 번 느꼈다!

참고사이트
justkeepgoing 님의 벨로그