React 101 - 파트 4: 이벤트 및 양식

내 Javascript 시리즈 이후:

이제 React 학습 여정을 시작할 준비가 되었습니다 :)

아무것도 놓치고 싶지 않다면 팔로우를 클릭하세요. 전날 React 과정에서 배운 내용을 여기 Dev.to에 게시할 예정입니다.

더 이상 고민하지 않고 여기에 4일차 메모를 요약했습니다.

이벤트

HTML과 마찬가지로 React는 사용자 이벤트를 기반으로 작업을 수행할 수 있습니다. React는 HTML과 같은 이벤트를 가지고 있습니다: click, change, mouseover 등.

이벤트 리스너를 만들려면 다음 구문을 사용합니다.
온클릭={() => myFunction()}

onClick은 이벤트이고 콜백은 이벤트가 발생했을 때 실행할 함수입니다.

화살표 함수를 사용하면 this 키워드가 항상 화살표 함수를 정의한 객체를 나타내기 때문에 화살표 함수를 사용합니다.

다음은 고전적인 카운터 구성 요소의 전체 예입니다.

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {count: 0}
  }
  increment() {
    this.setState({count: this.state.count += 1})
  }
  decrement() {
    this.setState({count: this.state.count -= 1})
  }
  render () {
    return <div>
      <h1>Count: {this.state.count} </h1>
      <button onClick={() => this.increment()}>Add</button>
      <button onClick={() => this.decrement()}>Remove</button>
    </div>
  }
}

ReactDOM.render(<Counter />, document.querySelector('#app'))

양식

양식 처리는 데이터가 값을 변경하거나 제출될 때 데이터를 처리하는 방법에 관한 것입니다.

React에서 양식 데이터는 구성 요소에 의해 처리됩니다.

구성 요소에서 데이터를 처리하면 모든 데이터가 구성 요소 상태에 저장됩니다.

onChange 속성에 이벤트 핸들러를 추가하여 변경 사항을 제어할 수 있습니다.

다음은 예입니다.

class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: ''}
  }
  handleChange(e) {
    this.setState({name: e.target.value})
  }
  render() {
    return <div>
      <label htmlFor="Name">Your name</label>
      <input onChange={(e) => this.handleChange(e)} value={this.state.name} type="text" id="Name" name="name" />
      <p>{this.state.name}</p>
    </div>
  }
}

ReactDOM.render(<Home />, document.querySelector('#app'))

이 마지막 예에서는 입력 필드를 변경할 때입니다. React는 handleChange 이벤트를 호출합니다.

이벤트는 e 인수로 호출됩니다. 이 인수는 현재 이벤트에 대한 참조입니다. 모든 현재 이벤트 정보를 포함합니다. 이벤트 요소와 같습니다.

또한 입력 필드 값을 {this.state.name}으로 설정했습니다. 이 값은 양식이 제출될 때 사용됩니다.

텍스트 영역

동일한 개념이 텍스트 영역에 적용됩니다. HTML 텍스트 영역에는 값 속성이 없습니다. HTML에서는 태그 요소 사이에 값을 삽입합니다.

<textarea>This is the text area content</textarea>

텍스트 영역의 값을 설정하기 위해 React에서는 일반 입력과 동일한 값 속성을 사용합니다.

<textarea onChange={(e) => this.handleChange(e)} value={this.state.note} type="text" id="note" name="note" /></textarea>

고르다

선택 필드의 경우 정확히 동일합니다. 선택한 속성을 사용하지 않습니다. React에서는 value 속성을 사용합니다.

<select value={this.state.name} onChange={(e) => this.handleChange(e)}>
    <option value="Mike">Mike</option>
    <option value="John">John</option>
    <option value="Peter">Peter</option>
</select>

다중 선택

다중 선택의 경우 선택과 동일하지만 반환 값은 배열입니다.

e.target.value는 더 이상 작동하지 않습니다. Array.from(e.target.selectedOptions)을 사용할 수 있습니다.

이러한 selectedOptions의 값만 원하므로 맵을 사용하여 값만 추출합니다. Array.from(e.target.selectedOptions).map(element => element.value)

다중 선택이 있는 전체 예는 다음과 같습니다.

class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: ''}
  }
  handleChange(e) {
    this.setState({name: Array.from(e.target.selectedOptions).map(element => element.value )})
  }
  render() {
    return <div>
      <label htmlFor="Name">Your name</label>
      <select value={this.state.name} onChange={(e) => this.handleChange(e)} multiple>
        <option value="Mike">Mike</option>
        <option value="John">John</option>
        <option value="Peter">Peter</option>
      </select>
      <p>{this.state.name}</p>
    </div>
  }
}

체크박스

체크박스의 경우 React는 checked 부울 속성을 사용합니다.

<input type="checkbox" checked={this.state.checked} onChange={e => this.handleChange(e)} />

handleChange(e) {
  this.setState({checked: e.target.checked})
}

React 입력 대 클래식 HTML 입력

입력 필드가 React 구성 요소 내부에서 사용되는 경우. 이 입력 필드는 더 이상 일반 HTML 필드처럼 작동하지 않습니다.

<input onChange={(e) => this.handleChange(e)} value={this.state.name} type="text" id="Name" name="name" />

해당 입력 필드가 클래식 HTML 입력처럼 작동하도록 하려면. 값 속성을 제거해야 합니다.

<input type="text" id="Name" name="name" />

해당 입력 필드에 대한 기본값을 설정하려는 경우. 값을 설정할 수 없으므로 defaultValue를 사용할 수 있습니다.

<input type="text" defaultValue="Mike" id="Name" name="name" />

양식 제출

양식을 제출하기 위해 양식 태그를 만들고 onSubmit 이벤트를 호출합니다.

<form onSubmit={(e) => this.handleSubmit(e)}>
  ...
</form>

handleSubmit은 e.preventDefault를 사용하여 양식이 게시 요청을 보내고 브라우저를 새로 고치는 것을 방지합니다.

handleSubmit(e) {
    e.preventDefault();
    console.log(this.state)
}

다음은 완전한 양식 제출 예입니다.

class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: '', email: ''}
  }
   handleChange(e) {
     const name = e.target.name
     this.setState({
       [name]: e.target.value
     })
   }
   handleSubmit(e) {
      e.preventDefault();
      console.log(this.state)
      this.setState({name: '', email: ''})
   }

  render() {
    return <div>
      <form onSubmit={(e) => this.handleSubmit(e)}>
        <input name="name" value={this.state.name} onChange={(e) => this.handleChange(e)} label="Name" />
        <input name="email" value={this.state.email} onChange={(e) => this.handleChange(e)} label="Email" />
        <button type="submit">Submit</button>
      </form>
    </div>
  }
}

ReactDOM.render(<Home />, document.querySelector('#app'))

결론

오늘은 여기까지입니다. 내일 여행은 계속됩니다... 아무것도 놓치지 않으려면 팔로우를 클릭하세요!