[React]React.js 폼 컴포넌트에서 상태(State) 또는 Refs를 사용해야 할까요?

React.js

폼 컴포넌트

에서 상태(State) 또는 Refs를 사용해야 할까요?

React.js로 폼 컴포넌트를 개발할 때 상태(State) 또는 Refs를 사용하는 두 가지 접근 방법을 만날 수 있습니다. 각 방법에는 장단점이 있습니다. 이번 글에서는 React.js 폼 컴포넌트에서 상태(State)와 Refs를 사용하는 장단점을 살펴보고, 프로젝트에서 선택하는 데 도움을 드리겠습니다.

상태(State) 사용의 장점

상태(State)는 React.js의 핵심 요소이며 컴포넌트 데이터를 관리하고 업데이트하는 방법을 제공합니다. 폼 컴포넌트에서 상태(State)를 사용하는 경우 여러 가지 이점이 있습니다:

• 데이터 관리의 용이성: 상태(State)를 사용하면 사용자가 입력하고 폼 필드와 상호 작용하는 동안 폼 데이터를 쉽게 관리하고 추적할 수 있습니다.
• 유연한 유효성 검사: 상태(State)를 활용하여 필수 필드, 입력 형식 등에 대한 유효성을 검사할 수 있습니다.
• React 생태계와의 원활한 통합: 상태(State)는 React의 기본적인 구성 요소이므로 폼 컴포넌트에서 사용함으로써 다른 React 기능과 라이브러리와 원활하게 통합할 수 있습니다.

다음은 상태(State)를 사용하는 폼 컴포넌트의 예시입니다:

var CommentForm = React.createClass({
  getInitialState: function() {
    return {
      author: '',
      text: ''
    };
  },
  
  handleSubmit: function(e) {
    e.preventDefault();
    // 상태(State)에서 폼 데이터에 접근
    var author = this.state.author.trim();
    var text = this.state.text.trim();
    // 여기서 폼 제출 로직을 수행합니다.
    if (!text || !author) {
      return;
    }
    this.setState({ author: '', text: '' });
  },
   
  handleAuthorChange: function(e) {
    this.setState({ author: e.target.value });
  },
  
  handleTextChange: function(e) {
    this.setState({ text: e.target.value });
  },
  
  render: function() {
    return (

    );
  }
});

이 예시에서는 author와 text 필드의 초기 상태를 빈 값으로 설정합니다. 폼이 제출되면 handleSubmit 함수

reference :