React에는 양식 입력을 처리하는 두 가지 주요 접근 방식이 있습니다.

• 제어 구성요소
• 제어되지 않는 구성요소

제어되는 구성 요소는 더 많은 제어와 검증을 제공하는 반면, 제어되지 않는 구성 요소는 간헐적인 값 액세스의 기본 형태에 더 간단하고 유용합니다.

제어되는 구성 요소

React State에 의해 값이 제어되는 양식 입력입니다. 상태 변수는 입력 값이 변경될 때마다 업데이트되며 입력 값은 value prop을 통해 명시적으로 설정됩니다.

onChange 이벤트 핸들러는 상태를 업데이트하는 데 사용됩니다.

import React, { useState } from "react";
function ControlledComponent() {
     const [name, setName] = useState("")

     const handleChange = (e) => {
          setName(e.target.value);
     }

     return(
          
     );
}

위의 예에서 이름 상태 변수는 입력 필드의 값을 제어합니다. handleChange 함수는 입력 값이 변경되고 입력 값이 value prop을 통해 name 상태 변수의 현재 값으로 설정될 때마다 이름 상태를 업데이트합니다.

제어되지 않는 구성요소

제어되지 않는 구성 요소는 React State에 의해 제어되지 않고 내부적으로 상태를 관리하는 양식 입력입니다. 양식이 제출된 후 또는 필요할 때마다 ref를 사용하여 입력의 현재 값에 액세스할 수 있습니다.

import React, { useRef } from "react";
function UncontrolledComponent() {
     const inputRef = useRef(null);

     const handleSubmit = (e) => {
          e.preventDefault();
          console.log(inputRef.current.value);
     };

     return(
          

위의 예에서 inputRef는 input 필드에 대한 ref를 생성하는 데 사용됩니다. handleSubmit 함수는 inputRef.current.value를 사용하여 입력의 현재 값에 액세스합니다. 필요에 따라 입력값을 활용하도록 양식 제출 로직을 구현할 수 있습니다.