React - Forms (입력폼) ★★★

목차

1. form 추가
2. form 처리
3. 조건부 렌더링
4. form 전송
5. 여러 입력 필드
6. 양식 유효성 확인
7. 오류 메세지 추가
8. textarea (긴 텍스트 입력)
9. select (드롭다운 선택창)

※ HTML처럼, React는 사용자와 웹페이지의 상호 작용 위해 form 사용.

form 추가

[예제] 이름 입력 받기

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  render() {

    return (

      <form>

        <h1>안녕!!</h1>

        <p>이름 입력:</p>

        <input

          type="text"

        />

      </form>

    );

  }

}

ReactDOM.render(<Hz />, document.getElementById('root')); 

 

form 처리

 

1.

form 처리는 값이 변경/제출 될 때 데이터 처리 방법에 관한 것 의미.

 

2.

HTML 경우, form 데이터는 보통 DOM에 의해 처리됨.

React 경우, form 데이터는 보통 컴포넌트에 의해 처리됨.

 

3. ★

onChange 속성에 이벤트 핸들러 추가해,

컴포넌트에서 데이터를 처리 후,

변경 사항을 모두 state 객체에 저장시킴. 

 

---

[예제]

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = { mb_name: '' };

  }

  changeName = (event) => {

    this.setState({mb_name: event.target.value});

  }

  render() {

    return (

      <form>

      <h1>{this.state.mb_name} 안녕!!</h1>

      <p>이름 입력:</p>

      <input

        type='text'

        onChange={this.changeName}

      />

      </form>

    );

  }

}

ReactDOM.render(<Hz />, document.getElementById('root')); 

 

---

PS.

1. 사용 전, constructor() 메서드에서 state 초기화 필요.

2. event.target.value구문 사용해 필드 값에 접근 가능.

 

조건부 렌더링

 

1. 입력값 저장 위해, 값이 빈 변수(예: hello) 정의.

2. 입력값이 있는 경우, hello 변수에 저장.

3. if문으로 hello 저장 값 유무에 렌더링 할 내용 결정.

4. 출력할 곳에 중괄호인 { } 이용해 출력. (예: {hello})

 

---

[예제]

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = { mb_name: '' };

  }

  changeName = (event) => {

    this.setState({mb_name: event.target.value});

  }

  render() {

    let hello = '';

    if (this.state.mb_name) {

      hello = <h1>{this.state.mb_name} 안녕!!</h1>;

    } else {

      hello = '';

    }

    return (

      <form>

      {hello}

      <p>이름 입력:</p>

      <input

        type='text'

        onChange={this.changeName}

      />

      </form>

    );

  }

}

ReactDOM.render(<Hz />, document.getElementById('root')); 

 

form 전송

 

onSubmit 속성에 이벤트 핸들러 추가해,

form을 전송(=제출)을 제어하는 게 가능.

 

---

[예제]

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = { mb_name: '' };

  }

  submitAlert = (event) => {

    event.preventDefault();

    alert(this.state.mb_name + " 전송");

  }

  changeName = (event) => {

    this.setState({mb_name: event.target.value});

  }

  render() {

    return (

      <form onSubmit={this.submitAlert}>

      <h1>{this.state.mb_name} 안녕!!</h1>

      <p>이름 입력 후 제출 버튼 클릭:</p>

      <input

        type='text'

        onChange={this.changeName}

      />

      <input

        type='submit'

      />

      </form>

    );

  }

}

ReactDOM.render(<Hz />, document.getElementById('root'));

 

---

PS.

event.preventDefault() : form이 실제로 제출되는 것을 방지할.

 

여러 입력 필드

 

1.

각 요소에 name 속성 추가해 둘 이상의 입력 필드 값 제어 가능.

2.

constructor()에서 state 초기화 할 때, 필드 name 사용.

3.

이벤트 핸들러에서 필드에 접근하려면 아래 구문 사용.

event.target.name : 입력 필드의 이름.

event.target.value : 입력 필드의 값.

4.

this.setState() 메서드에서 state 업데이트하려면,

속성명 주위를 대괄호 [ ]를 사용해 감싸줘야  함.

 

---

[예제]

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      mb_name: '',

      mb_age: null,

    };

  }

  changeNameAge = (event) => {

    let nam = event.target.name;

    let val = event.target.value;

    this.setState({[nam]: val});

  }

  render() {

    return (

      <form>

      <h1>{this.state.mb_name} {this.state.mb_age}</h1>

      <p>이름 입력:</p>

      <input

        type='text'

        name='mb_name'

        onChange={this.changeNameAge}

      />

      <p>나이 입력:</p>

      <input

        type='text'

        name='mb_age'

        onChange={this.changeNameAge}

      />

      </form>

    );

  }

}

ReactDOM.render(<Hz />, document.getElementById('root')); 

 

양식 유효성 확인

 

사용자가 입력 할 때,
양식 입력의 유효성을 검사하거나 양식이 제출될 때까지 대기 가능.

 

---

[예제] 나이 입력 시, 숫자 아닌 경우 제출 시 경고창 띄우기. 

 

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      mb_name: '',

      mb_age: null,

    };

  }

  submitAlert = (event) => {

    event.preventDefault();

    let mb_age = this.state.mb_age;

    if (!Number(mb_age)) {

      alert("숫자 아님. ㅡㅡ;");

    }

  }

  changeNameAge = (event) => {

    let nam = event.target.name;

    let val = event.target.value;

    this.setState({[nam]: val});

  }

  render() {

    return (

      <form onSubmit={this.submitAlert}>

      <h1>{this.state.mb_name} {this.state.mb_age}</h1>

      <p>이름 입력:</p>

      <input

        type='text'

        name='mb_name'

        onChange={this.changeNameAge}

      />

      <p>나이 입력:</p>

      <input

        type='text'

        name='mb_age'

        onChange={this.changeNameAge}

      />

      <br/>

      <br/>

      <input type='submit' />

      </form>

    );

  }

}

ReactDOM.render(<Hz />, document.getElementById('root')); 

오류 메세지 추가

 

입력과 동시에 오류 메세지 띄우기도 가능. 

 

---

[예제]

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      mb_name: '',

      mb_age: null,

      error_message: ''

    };

  }

  changeNameAge = (event) => {

    let nam = event.target.name;

    let val = event.target.value;

    let err = '';

    if (nam === "mb_age") {

      if (val !="" && !Number(val)) {

        err = <strong> 숫자가 아님. ㅡㅡ;</strong>;

      }

    }

    this.setState({error_message: err});

    this.setState({[nam]: val});

  }

  render() {

    return (

      <form onSubmit={this.submitAlert}>

      <h1>{this.state.mb_name} {this.state.mb_age}</h1>

      <p>이름 입력:</p>

      <input

        type='text'

        name='mb_name'

        onChange={this.changeNameAge}

      />

      <p>나이 입력:</p>

      <input

        type='text'

        name='mb_age'

        onChange={this.changeNameAge}

      />

      {this.state.error_message}

      </form>

    );

  }

}

ReactDOM.render(<Hz />, document.getElementById('root'));

 

textarea (긴 텍스트 입력)

 

React의 textarea 경우, HTML과 textarea의 텍스트 값 위치가 다름.

즉,

HTML : <textarea>텍스트</textarea>

React : <textarea value=텍스트> 

 

---

[예제]

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      description: '홈짱닷컴 Homzzang.com'

    };

  }

  render() {

    return (

      <form>

      <textarea value={this.state.description} />

      </form>

    );

  }

}

ReactDOM.render(<Hz />, document.getElementById('root'));

 

select (드롭다운 선택창)

 

React의 select 경우, HTML과 select의 선택값 표시법이 다름.

즉,

HTML : <option value="HTML" selected>HTML</option>

React : <select value=선택값>...</select>  

 

---

[HTML 경우]

 

<select>

  <option value="HTML">HTML</option>

  <option value="CSS" selected>CSS</option>

  <option value="JS">JS</option>

</select>

 

결과보기

---

[React 경우]

 

import React from 'react';

import ReactDOM from 'react-dom';

class Hz extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      lang: 'CSS'

    };

  }

  render() {

    return (

      <form>

      <select value={this.state.lang}>

        <option value="HTML">HTML</option>

        <option value="CSS">CSS</option>

        <option value="JS">JS</option>

      </select>

      </form>

    );

  }

}

ReactDOM.render(<Hz />, document.getElementById('root'));