React - 리액트 교과서 7장 학습내역 (React에서 폼 다루기)

React:

React에서 폼 다루기

아래 내용은 리액트 교과서를 읽고 학습한 내용입니다.

| 시작하기에 앞서

폼 요소는 사용자로부터 텍스트 같은 데이터나 클릭같은 조작을 전달받는데 사용하므로 웹 개발에서 중요한 부분이다.

| React에서 폼을 다루기 위한 권장 방법

• 일반적인 html에서 입력 요소를 다룰 때는 페이지의 DOM이 해당 요소의 값을 DOM 노드에서 관리한다. 즉 DOM을 저장소로 관리한다.

• 전통적인 HTML의 폼 요소는 사용자 입력에 의해 상태가 변경된다. 그렇지만, React는 UI를 묘사하기 위해 선언형 스타일을 사용하므로, 상태를 적절히 반영하려면 입력이 동적이여야 한다.

• 폼 요소를 사용자 입력을 이벤트로 전달받아 상태와 뷰를 동기화 하는 방식으로 사용하는데, 위와 같은 방식을 단방향 바인딩이라고 부르는데, 상태가 뷰를 갱신하는 것이 전부 이기 때문이다.

• 폼을 다룰때 권장하는 방식이 제어 컴포넌트를 사용하는 방식인데, 이방법을 사용하면 컴포넌트 내부 상태와 뷰를 항상 동기화 시킬 수 있다. 제어 컴포넌트라고 하는 이유는 React가 값을 통제하거나 설정하기 때문이다.

| React에서 폼과 이벤트 정의하기

• <form>으로 감싸는 것은 필수는 아니다. 하지만 여러요소의 그룹으로 이루어진 단일 페이지처럼 복잡한 UI를 다룰때는 각 그룹을 form으로 구분하는것이 현명하다.
• <form> 요소에 이벤트를 사용할 수 있다. 리액트는 폼요소를 위한 세가지 이벤트를 지원한다.

onChange: 폼의 입력 요소에 변경이 생기면 발생한다.

onInput: <textarea><input> 요소의 값이 변경될때 발생한다. (리액트 팀은 사용을 추천하지는 않는다고한다)

onSubmit: 폼 제출시 발생한다.

| 폼 요소 정의하기

• HTML의 거의 모든 입력 영역을 네가지 요소 <input>, <textarea>, <select>, <option> 을 사용하여 구현 할 수 있다. 리액트에서는 속성을 변경할 수 없는데, 폼 요소는 사용자가 폼 요소와 상호작용하면서 속성을 변경하므로 특별한 경우이다.

• React는 변경 가능한 속성인 value, checked, selected 를 두어 폼요소를 특별하게 다루고 있다. 이 특별한 변경가능한 속성을 interactive properties (대화형 속성) 이라고 부른다.

value: <input>, <textarea>, <select> 에 적용된다

checked: <input>에 type="checkbox" 또는 type="radio"인 경우 적용

selected: <select> 와 함께 <option>을 사용할 때 적용된다.

<input> 요소

text: 텍스트 입력 영역

password: 보안을 위해 입력 내요잉 가려진 텍스트 영역

radio: 라디오 버튼, 라디오 버튼 그룹을 만들때는 name 속성에 같은 값을 입력

checkbox : 체크박스 요소 그룹을 만들때는 name 속성에 같은 값을 입력

button: 버튼 폼 요소

• value를 변경가능한 속성으로 사용하지 않는 두가지 예외가 있는데 체크박스와 라디오 버튼이다. 이 두가지 요소는 html 요소당 값을 하나만 가지므로 값이 변경되지 않지만, checked 또는 selected 속성이 변경된다.

• value는 변경할 필요가 없으므로 하드코딩 되어있다. 사용자 조작에 의해 변경되는것은 요소의 checked속성으로 아래 예제를 참고하면 된다.

​
class Content extends React.Component {
  constructor(props) {
    super(props)
    this.handleRadio = this.handleRadio.bind(this)
    ...
    this.state = {
      description: `With the right pattern, applications will be more scalable and easier to maintain.
If you aspire one day to become a Node.js architect (or maybe you're already one and want to extend your knowledge), this presentation is for you.`,
      radioGroup: {
        angular: false,
        react: true,
        polymer: false
      },
      checkboxGroup: {
        node: false,
        react: true,
        express: false,
        mongodb: false
      },
      selectedValue: 'node'
    }
  }
  handleRadio(event) {
    let obj = {}
    obj[event.target.value] = event.target.checked // true
    this.setState({radioGroup: obj})
  }
...
  render() {
    return <div className="container">
      <form  onSubmit={this.handleSubmit}>
        <h2>input: text</h2>
        <input type="text" name="new-book-title" defaultValue="Node: The Best Parts"/>
        <hr/>
        <h2>input: password</h2>
        <input type="password" defaultValue="123456" onChange={this.handleChange} onInput={this.handleInput}/>
        <hr/>
        <h2>input: radio</h2>
        <label>
          <input type="radio" name="radioGroup" value='angular' checked={this.state.radioGroup['angular']} onChange={this.handleRadio}/>
          Angular
        </label>
        <br/>
        <label>
          <input type="radio" name="radioGroup" value='react' checked={this.state.radioGroup['react']} onChange={this.handleRadio}/>
          React
        </label>
        <br/>
        <label>
          <input type="radio" name="radioGroup" value='polymer' checked={this.state.radioGroup['polymer']} onChange={this.handleRadio}/>
          Polymer
        </label>
        ...
​
      </form>
    </div>
  }
}

<textarea> 요소

• 일반적인 HTML에서 <textarea>는 innerHTML을 사용하여 값을 보여준다.

<textarea>

example

</textarea>

반면, 리액트는 value 속성을 사용한다. 이런 관점에서, innerHTML로 값을 설정하는것은 안티패턴이다. 대신, value속성을 사용하는것을 권장한다.

<select>와 <option> 요소

<select multiple={true} value={['example1','example2']}>

...

</select>

와 같이 다중 선택요소를 렌더링하는것도 가능하다.

결론: 전반적으로 react에서 폼요소를 정의하는것은 value를 자주 사용하는것 외에는 html과 크게 다르지 않다.

| 변경 감지하기

• 폼 요소의 변경을 감지할때는 onChange 이벤트리스너를 이용한다. 일반적인 DOM의 onChange 이벤트는 요소가 포커스를 잃었을때만 발생하지만, React의 onChange 이벤트는 모든 새로운 입력에 대해 발생한다.

• onChange 이벤트를 발생시키는 요인은 요소에 따라 차이가있다.

<input><textarea><select> : value가 변경될때 onChange 발생

<input> 체크박스와 라디오버튼: checked 가 변경될떄 onChange 이벤트 발생

• 위의 분류에 따라 value를 읽는 방법이 다르다. 이벤트 핸들러의 인자로는 합성 이벤트를 받는다.
• 요소에 따라, event.target은 value, checked, selected 같은 값을 갖는다.

| 폼을 다루는 방법

이부분에선 비제어 컴포넌트 사용방법에 대한 내용이 나오는데, 위의 내용이 숙지가 먼저이므로 생략한다.

그리고 그 활용성에 대해서 아직은 좀 의문이 가는부분이 있다.

| 마치며

앞서 살펴본 것처럼 대부분 ui 작업이 편리한 폼 요소를 통해 이뤄진다. 사용자 친화적인 오류 메시지, 프론트엔드 유효성 검사, 그외의 툴팁, 크기를 변경할 수 있는 라디오 버튼, 기본값, 플레이스홀더 같은 중요기능들도 다뤄야한다. React는 브라우저간 차이가 없는 폼 요소 API를 제공하므로 복잡한 UI개발 작업을 더 쉽게 만든다고 한다.