Controlled Input vs Uncontrolled Input

서론

4일차.
밥 먹으면서 유튜브 보다가 고민하던 문제가 강의 주제로 떠서 행복했다.
🥰

본론

Uncontrolled Components 의 정의

보통, React 환경에서 개발을 진행할 때에는
특정 요소의 상태값 을 관리하여 데이터를 서버에 전송하거나 화면에 띄워주곤 한다.
이러한 경우를 React가 직접 상태 제어를 한다고 하여
Controlled Components 라고 하는데,
React가 직접 상태를 제어하지 않고 순수 자바스크립트 방식의
DOM API 를 사용하여 관리하는 방식을 Uncontrolled Components 라고 한다.

React 공식문서에는 UseRef Hook 을 사용하여

const commentRef = useRef(null)
const commentsSubmitHandler = (event) => {
    event.preventDefault();
    const comment = commentRef.current.value.trim();
    if (comment === "") return;
    postMutate({ comment, postId });
    commentRef.current.value = "";
  };

이런식으로 구현하였지만,
아주 간단한 form 이라면 useRef를 사용하지 않고도

const commentsSubmitHandler = (event) => {
    event.preventDefault();
    const comment = event.target.children.comment.value.trim();
    if (comment === "") return;
    postMutate({ comment, postId });
    event.target.children.comment.value = "";
  };

자바스크립트의 DOM 선택자인 target.children 같은 것으로 선택해줄 수 있다.
comment는 해당 엘리먼트에 부여한 id 이다.

<form onSubmit={commentsSubmitHandler}>
  <input id="comment" placeholder="댓글 작성하기" />
<form>

input 엘리먼트에 useState를 사용하여 상태를 관리하게 되면
onChange 이벤트로 번거롭게 추가적으로 관리해주어야 하지만
위의 방식을 이용하면 추가적인 이벤트를 관리해주지 않아도 되서
간단한 submit form 같은 이벤트를 처리할 때 유용하다.

Uncontolled Componenets의 단점으로는,
React 가 컨트롤하지 않게 되므로
input의 value에 대한 유효성 검사나 상태에 따른 버튼 비활성화 같은
로직을 구현하기 까다롭다는 점이다.

간단하게 Submit 로직 하나만을 위해서 구현되는 form 의 경우에만
사용하도록 하자. React 공식문서에도 이쪽을 더 권장하고 있다.

결론

하나에 몰입하면 다른 것들은 신경쓰지 못하는 아주 못된 버릇이 있다.
해당 로직을 구현할 때,
"어떻게 하면 useState 없이 댓글창을 구현할 수 있을까?"
에 대한 고민을 하다가 useRef 로 구현했었는데
큰 차이가 없는 것 같아서 답답했는데
정리된 영상과 공식문서를 읽고 속이 후련해졌다.
아 저렇게도 쓰는구나