[reactjs] React 제어 구성 요소와 제어되지 않는 구성 요소는 무엇입니까?

Program / 글쓴이

ReactJS에서 제어되는 구성 요소와 제어되지 않는 구성 요소는 무엇입니까? 서로 어떻게 다른가요?

답변

이것은 상태 저장 DOM 구성 요소 (양식 요소)와 관련이 있으며 React 문서는 차이점을 설명합니다.

  • 제어 구성 요소 를 통해 전류 값을 취하고 하나 props에 통지 변경 등을 통해 콜백 onChange. 부모 구성 요소는 콜백을 처리하고 자체 상태를 관리하고 제어 된 구성 요소에 소품으로 새 값을 전달하여 “제어”합니다. 이것을 “dumb component”라고 부를 수도 있습니다.
  • 통제되지 않은 구성 요소 를 저장 자신의 상태가 내부적으로, 당신은을 사용하여 DOM을 조회하는 것이 하나입니다 ref당신이 그것을 필요로 할 때 현재 값을 찾을 수 있습니다. 이것은 전통적인 HTML과 좀 더 비슷합니다.

대부분의 기본 React 양식 구성 요소는 제어 및 제어되지 않은 사용을 모두 지원합니다.

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

대부분 (또는 모든) 경우에 제어 된 구성 요소를 사용해야합니다 .

답변

  • 제어 된 구성 요소는 콜백을 사용하여 변경 사항에 대해 다른 구성 요소에 알립니다. 예 : <Button onClick={() => console.log("clicked")}>Click</Button>.
  • 제어되지 않은 구성 요소는 변경 사항에 대해 다른 구성 요소에 알리지 않으며 참조를 사용하여 구성 요소에 액세스 할 수 있습니다. HTML 요소의 실제 돔에 액세스해야하는 경우 Ref가 유용 할 수 있습니다.

답변