React: 통제됨 vs. 제어되지 않음

반응형

HTML과 DOM이 기본적으로 양식을 지원하기 때문에 React는 양식에 대한 기본 지원을 제공합니다.

대응 양식 대 HTML 양식

HTML 양식: 양식 태그와 입력에 대한 레이블이 있습니다. 레이블 속성은

대응 양식: 유사한 양식 태그, 대응은 해당 입력의 ID와 일치하는 htmlFor 요소를 사용합니다.

 

React의 입력은 제어됨 또는 제어되지 않음의 두 가지 유형 중 하나가 될 수 있습니다.

제어되지 않은 입력은 둘 중 더 간단하다. 이것은 평범한 HTML 입력과 비슷합니다. 응답은 페이지에 삽입하고 브라우저는 나머지를 추적합니다. 제어되지 않은 입력은 더 적은 코드를 필요로 합니다. 그들은 자신의 가치를 관리합니다. 일반 HTML 양식과 마찬가지로 값은 입력의 DOM 노드에 유지됩니다. 수동으로 추적할 필요가 없습니다.

아래의 코드 샘플에서는 어떤 값을 표시해야 하는지 알려주는 값 요소를 전달하지 않았기 때문에 모든 입력이 제어되지 않습니다.

필요한 경우 참조를 사용하여 이러한 요소의 가치를 능동적으로 추적할 수 있습니다.
기준에는 DOM 노드에 대한 참조가 있습니다. 제어되지 않은 입력으로부터 값을 얻기 위해서는 참조가 필요하며, 참조 프로포트를 할당함으로써 이를 얻을 수 있습니다.
우리는 필요할 때마다 값을 읽을 수 있습니다.

 

이전 예제의 주문 양식 입력에 참조 추가:

useRef hook으로 3개의 ref를 만들고 ref propect로 입력에 ref를 바인딩했습니다. 구성요소가 처음 렌더링될 때 React는 참조를 설정합니다. "nameRef.current"는 다른 2개의 ref와 유사하게 이름 입력의 DOM 노드를 가리킨다. 이러한 참조는 문서를 실행할 때 얻을 수 있는 값과 동일합니다.브라우저 콘솔의 querySelector(id=name)).

양식을 제출할 때와 같이 특정 시간에만 값이 필요할 때는 제어되지 않은 입력이 최선의 선택입니다.
모든 키 누름 값을 검사하거나 검증하거나 변환해야 한다면
제어된 입력이 더 나은 해결책입니다.

제어된 입력을 사용하여 예를 변환해 보겠습니다.

 

"handleSubmit" 함수는 값을 검증하거나 변환하는 등 필요한 모든 작업을 수행할 수 있습니다.

통제됨 vs. 제어되지 않음: 어떤 것을 사용할까요?

대응 문서에 따름:

 

두 스타일 중 제어된 입력은 UI가 상태를 반영하는 더 "반응-y 방식"이다.

다음에 가장 적합한 제어된 입력:

• 모든 키의 양식 유효성 검사: 모든 키가 유효해질 때까지 Submit 버튼을 비활성화해야 할 경우 유용합니다.
• 전자 메일 ID 필드와 같은 형식화된 입력을 처리하거나 정크 문자를 입력할 수 없도록 방지합니다.
• 여러 입력이 동일한 데이터를 기반으로 할 때 서로 동기화된 상태를 유지합니다.

 

하지만 몇 가지 단점이 있습니다.
제어된 입력은 더 복잡합니다.
모든 키 누름에서 제어된 입력 리렌더.
제어되지 않은 입력물에는 훨씬 더 적은 상용판이 있습니다.

하지만 이건 대부분 괜찮아요. 렌더는 빠릅니다. 중소형의 경우 우리는 아마 알아차리지 못할 것입니다. 입력 수가 증가하거나 폼에 렌더링 비용이 많이 드는 하위 구성 요소가 있을 경우 키 누름의 지연이 느껴지기 시작할 수 있습니다. 제어되지 않은 입력의 경우 브라우저가 모든 것을 처리합니다.
상태를 업데이트할 필요가 없어 다시 렌더할 필요가 없다는 뜻이지
모든 키를 누를 때마다 React를 무시하고 바로 브라우저로 이동합니다.

따라서 제어되지 않은 입력이 실제로 더 나은 기본값일 수 있다는 생각에 동의할 수 있습니다. 만약 제어되지 않은 입력이 당신의 경우라면 우리는 분명히 그것들을 사용할 수 있습니다. 더 쉽고, 더 빨라요

해피 코딩!