React에서 입력 필드 값 가져오기

1. React에서 입력이 작동하는 방식
2. React 16에서 입력 필드 값 가져오기
3. Hooks를 사용하여 React의 입력 필드 값 가져오기
4. 수십 개의 입력이 있는 큰 양식을 처리하는 방법

사용자 입력을 처리하는 것은 동적 React 애플리케이션 개발의 핵심 중 하나입니다. 사용자 입력으로 작업하면 사용자의 작업에 응답하고 우수한 사용자 경험을 제공할 수 있습니다.

React에서 작업할 때 단일 소스 소스를 설정하기 위해 상태 속성에 사용자 입력을 저장하는 것이 좋습니다. 이를 통해 데이터와 쉽게 상호 작용하고 필요할 때 데이터를 조작할 수 있습니다.

상태가 변경될 때마다 React는 가장 최근 변경 사항을 반영하도록 구성 요소를 자동으로 업데이트합니다.

React에서 입력이 작동하는 방식

계속 진행하기 전에 React가 구성 요소를 다시 렌더링하기로 결정한 시기와 이유를 이해해야 합니다.

첫째, 내부 상태가 변경되면 애플리케이션 UI가 업데이트(다시 렌더링)됩니다. 다른 옵션을 선택하거나 필드를 선택/선택 취소하는 것과 같은 모든 사용자 이벤트는 상태를 변경하고 다시 렌더링할 수 있습니다.

둘째, 부모로부터 받은 component props의 변경이 있을 때 re-render가 발생합니다. 경우에 따라 상위 구성 요소는 해당 상태에서 prop 값을 제공합니다.

React는 HTML과 매우 유사해 보이지만 다르게 작동하는 JSX를 사용합니다.

JSX에서 <input> 요소를 생성할 때 HTML <input> 요소를 생성하는 것이 아니라 이와 매우 유사한 React input 객체를 생성한다는 점을 염두에 두는 것이 중요합니다. HTML input 요소와 유사하게 렌더링되고 이벤트 처리 인터페이스를 모방하지만 그렇지 않으면 독립적입니다.

React 애플리케이션은 구성 요소 상태에서 값을 가져오는 UI 요소로 구성됩니다. 앞에서 언급했듯이 입력을 변경하는 것은 상태를 변경하는 가장 일반적인 방법 중 하나이며 확장하여 페이지에 렌더링되는 시각적 요소입니다.

그러나 명심해야 할 중요한 점은 상태가 React 애플리케이션에서 단일 정보 소스라는 것입니다. UI 인터페이스에는 보조 역할이 있습니다.

React 16에서 입력 필드 값 가져오기

React 16 출시 이후 개발자는 읽기 가능한 클래스 구문을 사용하여 React 클래스 구성 요소를 만들 수 있습니다. 아래 예제와 같이 이벤트 핸들러가 작동하려면 생성자 함수에서 바인딩하거나 화살표 구문을 사용하여 호출해야 합니다.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      enteredValue: ""
    }
  }
  render() {
    console.log(this.state.enteredValue)
    return <input type="text"
                  onChange={(event) => this.setState({enteredValue: event.target.value})}>
           </input>;
  }
}

일반적으로 화살표 구문을 사용하는 것이 더 읽기 쉽고 편리합니다. 또한 응용 프로그램을 더 쉽게 디버그할 수 있습니다.

playcode를 직접 확인하고 (사용자라고도 함) 입력 필드에 새로운 것을 입력할 때마다 상태 값이 업데이트된 다음 콘솔에 기록되는 것을 확인할 수 있습니다(데모용).

Hooks를 사용하여 React의 입력 필드 값 가져오기

함수형 구성 요소는 클래스 구성 요소보다 쓰기와 읽기가 훨씬 쉽습니다. 이러한 유형의 구성 요소는 props를 인수로 받는 함수일 뿐입니다.

몇 년 전까지만 해도 기능 구성 요소는 상태 비저장 또는 멍청한 구성 요소라고도 했으며 대부분 데이터를 시각화하는 데 사용되었습니다.

React 16.8 이후로 기능 구성 요소는 후크를 포함한 많은 새로운 기능에 액세스할 수 있게 되었습니다. 이제 개발자는 useState() 후크를 사용하여 기능 구성 요소의 상태를 유지할 수 있습니다.

이 후크를 사용하면 하나의 상태 변수와 이를 업데이트하는 함수를 얻을 수 있습니다. 더 이상 기능 구성 요소에서 .setState() API를 직접 사용할 필요가 없습니다.

다음은 기능적 구성 요소로 구축된 동일한 애플리케이션의 모습입니다.

function App(props){
  let [inputValue, setInputValue] = useState("")
  console.log(inputValue)
  return <input type="text"
            onChange={(event) => setInputValue(event.target.value)}>
         </input>;
}

useState() 후크는 매우 간단한 방식으로 작동합니다. 호출되면 inputValue에 할당된 상태 변수와 이를 업데이트하는 함수를 반환합니다.

각 변수를 업데이트하기 위한 고유한 기능을 갖는 것은 가독성 측면에서 유리할 수 있습니다. 우리가 볼 수 있듯이 setInputValue는 상당히 설명적인 이름을 가지고 있습니다.

useState() 후크(빈 문자열)에 전달된 인수는 inputValue 상태 변수의 초기 값으로 사용됩니다.

보시다시피, 이 정의는 훨씬 더 명확하고 클래스 구성 요소처럼 잘 작동합니다. 기능 구성 요소는 일반적으로 상태 값을 저장하기 위해 몇 개의 변수만 있는 구성 요소가 필요할 때 더 나은 선택입니다.

그러나 어떤 경우에는 클래스 구성 요소가 필요하고 기능적 구성 요소와 다릅니다. 차이점에 대해 자세히 알아보려면 공식 반응 문서를 읽어보세요.

수십 개의 입력이 있는 큰 양식을 처리하는 방법

앞서 언급했듯이 사용자가 입력한 값을 유지하려면 모든 UI 입력 요소에 대한 상태 변수가 필요합니다. 양식에 수십, 심지어 수백 개의 입력이 있는 것은 드문 일이 아닙니다. 그들 모두에 대해 별도의 상태 변수를 생성해야 합니까?

솔루션은 간단하고 React의 전체 논리와 일치합니다. 이러한 입력을 하나의 큰 구성 요소에 포함하는 대신 별도의 작은 구성 요소를 만들어 논리적으로 연결된 조각으로 분할해야 합니다.

그런 다음 가져와서 큰 양식을 작성하는 데 사용할 수 있습니다. 이런 식으로 더 작은 구성 요소는 몇 가지 입력을 저장하고 유지 관리하는 역할만 합니다.

이러한 방식으로 구성된 앱은 더 읽기 쉽고 유지 관리하기 쉽습니다. 귀하의 코드를 작업하는 다른 개발자들은 간단하고 이해하기 쉬운 코드를 작성해 주셔서 감사합니다.