소개

여러분 처음 뵙겠습니다.
엔지니어 경력 1년째, 현장 경험 제로의 약소 자칭 Web 엔지니어입니다.

교육에서 Vue를 사용하여 개발했습니다.
다른 JS 프레임워크도 만져보고 싶어지고, 이 기사의 작성에 이르렀던 대로입니다.

납치자의 예비 지식

· Vue를 사용하여 개발 한 적이있다.
· Progate에서 React IV까지 학습됨

개발 환경

· MacOS Catalina 버전 10.15.7
· Node.js v12.18.4
· Npm 6.14.6

이번에 만들고 싶은 것

React 의 사용법을 배우는데 있어서, 이번은 간단한 폼을 작성해 가겠지~.



제대로 입력치가 송신되고 있는지 확인하기 위해서 경고 표시도 시키는 응고~.

프로젝트 만들기

공식 씨가 추천하고 있는 방법으로 프로젝트를 만들어 가는군요~.

Create React App은 React를 배울 수있는 편안한 환경이며,
React에서 새로운 단일 페이지 응용 프로그램을 만드는 가장 좋은 방법입니다.

Create React App:
htps : // 그럼. Rea ctjs. 오 rg / 두 cs / c 레테 - 아-네 w- 리 아 c- p p. html # c Rete-Re-ct-p

React 프로젝트 만들기

$ npx create-react-app react-form-app

npx는 난자이나라고 생각했지만, npm(5.6 이상) 들어가면 사용할 수 있는 툴인 것 같다.

프로젝트 시작

React 프로젝트 시작

$ cd react-form-app
$ npm start

어쩐지 자동으로 브라우저 열고 샤레를 화면으로 온 【감동! ! 】

다음은 좋아하는 IDE (통합 개발 환경)로 프로젝트 파일을 열고
바로 구현해 가는 거야~.

양식 만들기

공식 씨의 방법을 참고로 엄청 간단한 폼을 만듭니다.
양식 : htps : // 그럼. Rea ctjs. rg/do cs/후우rms. HTML #이 tsby - fu sw w ぺr

App.js

import React from 'react'

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <form>
          <label>
            名前：
            <input type="text" name="name" />
          </label>
          <input type="submit" value="送信" />
        </form>
      </div>
    )
  }
}

export default App

input 태그는 <input /> 라는 식으로 뒤에 / 에 붙여야 한다.
이것이 JSX 기법이라는 녀석인가! !


외형이지만 생긴 응고.

onChange 이벤트

제출 후에도 값이 입력 양식에 남아있게 하려면,
입력 양식의 input 태그에 onChangeイベント를 지정하여 입력 값을 가져옵니다.

Apps.js

  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.handleChange = this.handleChange.bind(this); //これが無いと何かエラー出る
  }

  handleChange(event) {
    this.setState({name: event.target.value}); //event.target.valueで入力値を取得し、stateを更新
  }

  render() {
    return (
      <div className="App">
        <form>
          <label>
            名前：
            <input
              type="text"
              value={this.state.name}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="送信" />
        </form>
      </div>
    )
  }

constructor() 는 라이프 사이클 메소드입니다.render() 보다 먼저 호출되는 녀석이군요. (Vue로 말한다 created() 같은 녀석인가!!)

onSubmit 이벤트

이것만으로는 아직 송신 후에 입력값은 남지 않는다.
양식을 제출할 때 처리는 양식 태그에 onSubmitイベント를 지정합니다.

Form.js

  handleSubmit(event) {
    alert(this.state.name + 'さん！！'); //アラートを表示
    event.preventDefault();
  }

  render() {
    return (
      <div className="App">
        <form onSubmit={this.handleSubmit}>
          <label>
            名前：
            <input
              type="text"
              value={this.state.name}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="送信" />
        </form>
      </div>
    )
  }

preventDefault() 는 이벤트를 취소하는 메소드입니다.
이번이라면, submit 이벤트가 가지는 페이지의 이동을 취소하고 있습니다.

요약

・더 깊은 내용의 기사 쓰고 싶었던… (첫 투고이기 때문에 용서해)
· Vue가 얼마나 JS 약자에게 친화적 인 프레임 워크인지 알았습니다.

App.js

import React from 'react'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    alert(this.state.name + 'さん！！');
    event.preventDefault();
  }

  render() {
    return (
      <div className="App">
        <form onSubmit={this.handleSubmit}>
          <label>
            名前：
            <input
              type="text"
              value={this.state.name}
              onChange={this.handleChange}
            />
          </label>
          <input type="submit" value="送信" />
        </form>
      </div>
    )
  }
}

export default App

참고 기사

· React 문의 양식 작성
· React에서 Uncaught TypeError: Cannot read property 'setState' of undefined 과 화난 경우의 대처법
· preventDefault() 정보