React(14) Create 구현 : 모드 전환 & form 생성

최종 목표 

create 기능 구현하기 

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

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

 

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

 

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

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

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

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

 

2. create 구현 : 모드 전환 & form 생성

create 버튼을 눌렀을 때 <CreateContent>이 생성되며 내용이 출력된다.

 

App.js

- render( )안에 if문에 따라 각 모드에서 실행될 _article = <ReadContent>태그 내용을 각각 넣어주기 

create모드일 때 _article의 핸들러메소드는 다음 포스팅에서 자세히 다루겠다.

- return 안에 <ReadContent>태그 대신 {_article} 이라는 변수를 준다.

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

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;

---

 

CreateContent.js

- Create 링크 클릭 시 나타날 입력폼을 넣어준다.

- form 태그 손봐주기 (onSubmit이벤트로 페이지전환 방지)

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

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;

---