React(13) Create구현 : 모드 변경

"상위 컴포넌트가 → 하위로 값을 전달할때 props로 전달하고 

하위가 → 상위로 명령을 전달할때는 event로 전달한다."

 

최종 목표 

create 기능 구현하기 

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

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

 

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

 

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

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

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

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

1. create구현 : 클릭시 mode라는 state값이 달라짐 

버튼을 클릭하면 mode가 바뀜

App.js 

1. <Control>이라는 사용자 정의 태그를 만든다. 

2. <Control>태그안에 props로 onChangeMode를 만들고 핸들러메소드를 연결시켜준다. 

3. 핸들러메소드 안에 인자로 _mode를 넣고 setState로 해당 인자로 모드 변경{mode:_mode}을 한다.

4. 핸들러메소드에 bind함수를 연결해 이벤트를 사용할 수 있도록 해준다.

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

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;

---

 

Control.js 

1. Control 클래스를 만들고 render함수를 만든다. (기본틀)

2. render 함수의 return 안에 (<li>태그를 사용하여 create, update, delete 기능을 만든다.)

- create와 update는 <a>를 이용한 링크로 delete는 <input>버튼으로 만든다.

(삭제기능 자체가 문제가 될수 있어 링크인 페이지 개념이 아닌 버튼과 같은 operation개념을 사용한다.)

3. <a>와 <input>안에 onClick이벤트를 만들어준다.

(핸들러 메소드 안에는 인자로 e가 들어가 있으며 아래 내용이 들어있다.)

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

import React, { Component } from 'react';

 

class Control extends Component {

  render() {

    return(    

        <ul>

            <li>

              <a href="/create" onClick={function(e){

                  e.preventDefault();

                  this.props.onChangeMode('create');

              }.bind(this)}>create</a>

            </li>

            <li>

              <a href="/update" onClick={function(e){

                e.preventDefault();

                this.props.onChangeMode('update');

              }.bind(this)}>update</a>

            </li>

            <li>

              <input onClick={function(e){

                e.preventDefault();

                this.props.onChangeMode('delete');

              }.bind(this)} type="button" value="delete"/>

            </li>

        </ul>

    );

  }

}

export default Control;

---