React 로 제어되지 않는 입력 필드 마스터하기

소개

이 랩에서는 React 를 사용하여 제어되지 않는 입력 필드를 만드는 방법을 살펴봅니다. 제어되지 않는 입력 필드는 부모 컴포넌트에서 값 상태를 관리하지 않고 사용자 입력을 캡처하는 간단하고 유연한 방법입니다. 값 업데이트에 대해 부모에게 알리기 위해 콜백 함수를 사용하며, 이를 통해 다른 컴포넌트 및 API 와 쉽게 통합할 수 있습니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

제어되지 않는 입력 필드

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

이 코드는 값 업데이트에 대해 부모에게 알리기 위해 콜백 함수를 사용하는 제어되지 않는 <input> 요소를 렌더링합니다. 사용 방법은 다음과 같습니다.

defaultValue prop 을 사용하여 부모로부터 초기 값을 전달합니다.
값 업데이트를 처리하기 위해 onValueChange라는 콜백 함수를 전달합니다.
onChange 이벤트를 사용하여 콜백을 실행하고 새 값을 부모에게 보냅니다.

다음은 예시입니다.

const UncontrolledInput = ({ defaultValue, onValueChange, ...rest }) => {
  return (
    <input
      defaultValue={defaultValue} target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <UncontrolledInput
    type="text"
    placeholder="Insert some text here..."
  />
);

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 제어되지 않는 입력 필드 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.