React(15) Create 구현 : onSubmit이벤트 & contents변경

최종 목표 

create 기능 구현하기 

create 링크 클릭시 화면하단에 create 섹션과 입력폼이 생긴다. 내용 입력 후 submit 버튼을 누르면

화면에 입력한 내용이 담긴 링크(원소)가 추가되는 이벤트가 발생한다.

 

create에 내용을 입력 후 submit 버튼을 누르면 해당링크가 생성되고 링크를 누르면 내용이 출력됨 

 

자 최종목표 도달을 위해 한단계씩 시작해보자 

1. CRUD버튼 클릭시 모드가 변경 

2. Create버튼 클릭시 모드가 변경되며 입력창이 생성 

3. Create버튼 클릭시 모드가 변경되며 입력창이 생성되며 입력한 내용이 담긴 링크를 화면에 추가 

 

2. create 구현 : onSubmit 이벤트

→ 컨텐츠 리스트의 맨 끝에 서밋한 데이터를 추가하기  

 

App.js

- this.max_content_id 는 uI에 영향을 주지 않는 값이기 때문에 state값으로 하지 않는다. 불필요한 렌더링이 발생하기 때문이다.

- <CreateContent>안에 onSubmit이라는 prop을 추가한다. 핸들러메소드 인자로 _title과 _desc를 받는다.    

**코드보기(복사용 첨부 / 더보기클릭)

import React, { Component } from 'react';

import Subject from "./components/Subject.js";

import Main from "./components/Main.js";

import Control from "./components/Control.js";

import CreateContent from "./components/CreateContent.js";

import ReadContent from "./components/ReadContent.js";

import './App.css';

 

class App extends Component {

  constructor(props){

    super(props);

    this.max_content_id = 3;

    this.state = {   

      mode:'read', 

      selected_content_id:1, 

      head:{title:'WEB', sub:'world wide web!'},

      welcome:{title:'Welcome', desc:'Hello, React!!'},

      contents:[

        {id:1, title:'HTML', desc:'HTML is for information'},

        {id:2, title:'CSS', desc:'CSS is for design'},

        {id:3, title:'JavaScript', desc:'JavaScript is for interactive'}      

      ]

    }

  }

 

  render() {

    console.log('App render');

    var _title, _desc, _article = null;

    if(this.state.mode ===  'welcome'){

      _title = this.state.welcome.title;

      _desc = this.state.welcome.desc;

      _article = <ReadContent title={_title} desc={_desc}></ReadContent>

    } else if(this.state.mode === 'read'){

      var i = 0;

      while(i < this.state.contents.length){

        var data = this.state.contents[i];

        if(data.id === this.state.selected_content_id) {

          _title = data.title;

          _desc = data.desc;

          break;

        }

        i = i + 1;

      }

      _article = <ReadContent title={_title} desc={_desc}></ReadContent>

    } else if(this.state.mode === 'create'){

      _article = <CreateContent onSubmit={function(_title, _desc){

        // add content to this.state.contents

        this.max_content_id += 1;

        var _contents = this.state.contents.concat(

          {id:this.max_content_id, title:_title, desc:_desc}

        );

        this.setState({

          contents:_contents

        });

        console.log(_title, _desc);

      }.bind(this)}></CreateContent>

    }

    return(

      <div className="App">

        <Subject 

          title={this.state.head.title} 

          sub={this.state.head.sub}

          onChangePage={function(){

            this.setState({mode:'welcome'});

          }.bind(this)}>

        </Subject>        

        <Main 

          onChangePage={function(id){

            this.setState({

              mode:'read',

              selected_content_id:Number(id)

            });

          }.bind(this)}

          data={this.state.contents}>

        </Main>

        <Control onChangeMode={function(_mode){

          this.setState({

            mode:_mode

          })

        }.bind(this)}></Control>

        {_article}

      </div>

    );

  }

}

export default App;

---

 

**push와 concat의 차이점 

push와 concat의 공통점은 데이터를 배열안에 추가할 때 사용한다는 점이다. 

push는 데이터 추가된 사항이 배열의 원본에 적용되며 (마치 파일에 그대로 저장st)

concat은 원본은 그대로 남기고 copy된 배열로 데이터가 추가된 배열이 생성된다. (마치 다른이름으로 저장st)

 

CreateContent.js

- <form> 태그 안에 onSubmit 이벤트를 넣고, 핸들러 메소드의 인자로 e를 받는다.

- 이벤트 방지코드를 넣어 이벤트 동작시 리로드를 막아준다.(리액트로 리로드없이 페이지를 만드는데 목적이 있기 때문)

- bind(this)를 사용하여 메소드를 동작시킨다.

- 그 뒤에 debugger; 사용하여 debugger 코드까지만 실행하며 동작이 멈춘다. 

디버깅 과정, debugger; 를 사용하여 실행시키면 딱 저부분에서 잠시 멈춘다. 

 

- e라는 객체를 콘솔에 입력하면 정보가 나온다.

- e의 하위 프로퍼티인 target은 <form> 전체을 가리킨다.

- e의 하위 프로퍼티인 target의 → 하위 속성인 title은  → 하위 속성인 value로 값을 확인할 수 있다.

  → 즉 e.target.title.value = _title은 같은 값을 가진다는 사실을 알아냄 

디버그를 한 이유는 어떤 입력값을 집어넣든지 알 수 있는 코드를 찾기 위해서이다.

 

- 디버그 후, App.js에서 props로 지정한 onSubmit()을 실행, 인자로는 title과 desc의 값을 넣어주었다.

**코드보기(복사용 첨부 / 더보기클릭)

import React, { Component } from 'react';

 

class CreateContent extends Component {

  render() {

    console.log('CreateContent render');

    return(

      <article>

        <h2>Create</h2>

        <form action="/create_process" method="POST" 

              onSubmit={function(e){

                e.preventDefault(); 

                this.props.onSubmit(

                 e.target.title.value,

                 e.target.desc.value

                );                   

              }.bind(this)}>

          <p><input type="text" name="title" placeholder="title" /></p>

          <p>

            <textarea name="desc" placeholder="description"></textarea>

          </p>

          <p>

            <input type="submit" value="submit" />

          </p>

        </form>

      </article>

    );

  } 

}

export default CreateContent;

---

 

코드가 동작하는지 간단히 테스트 - 입력칸에 문장을 적고 

콘솔에서 확인하면 App.js에서 console.log(_title, _desc); 로 입력한 값이 그대로 출력! 

 

실행화면

create누르고 내용을 적으면 항목으로 업데이트 되며 링크를 클릭하면 내용이 출력됨