[React] Create 기능 구현 - mode 변경 & form & onSubmit

Study. React

Create 기능 구현

[create 기능 구현: mode 변경]

📌<Control>안에 onChangeMode 함수(핸들러) 추가

📌핸들러: 이벤트가 호출되었을 때 실행되어야 하는 함수

<Control onChangeMode={function(){}.bind(this)}></Control>

 

📌클릭하면 mode가 해당하는 값에 따라 바뀜

📌App.js

<Control onChangeMode={function(_mode){
          this.setState({
            mode:_mode
          });
        }.bind(this)}></Control>

📌Control.js(Subject.js에서 파일이름 변경)

import React, { Component } from 'react';

class Control extends Component {
    render() {
      console.log('Subject render');
      return (
        <ul>
          <li><a href="/create" onClick={function(e){
            e.preventDefault();
            this.props.onChangeModde('create');
          }.bind(this)}></a></li>
          <li><a href="/update" onClick={function(e){
            e.preventDefault();
            this.props.onChangeModde('update');
          }.bind(this)}></a></li>
          <li><input onClick={function(e){
            e.preventDefault();
            this.props.onChangeModde('delete');
          }.bind(this)} type="button" value="delete"></input></li>
        </ul>
      );
    }
  }
export default Control;

📌그러면 create, update, delete를 눌렀을 때 개발자 도구 페이지에서의 mode가 바뀌는 것을 알 수 있다.

 

[create 기능 구현: mode 전환 기능]

📌mode의 값에 따라 article 영역이 변경

📌ReadContent.js 파일을 새롭게 생성

import React, { Component } from 'react';

class ReadContent extends Component{
    render(){
      console.log('Content render');
      return(
        <article>
          <h2>{this.props.title}</h2>
          {this.props.desc}
        </article>
      );
    }
  }
  export default ReadContent;

 

📌App.js파일의 render()함수 안에 if문에서 ReadContent를 _article이라는 변수로 선언

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

 

📌mode가 read일 때도 article이 나와줘야 하기때문에 아래 코드를 while이 끝난 지점에 추가

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

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>
    }

 

📌그 다음 create모드를 누르면 article이 CreateContent가 나오도록 코드 추가

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></CreateContent>
    }

 

📌WEB을 누르면 ReadCotent가 나오고 create를 누르면 CreateContent가 나옴

 

[create 기능 구현: form]

📌CreateContent의 form추가

📌CreateContent.js/ form태그 안에 추가

import React, { Component } from 'react';

class CreateContent extends Component{
    render(){
      console.log('Content render');
      return(
        <article>
          <h2>Create</h2>
          <form>
            <p><input type="text" name="title" placeholder="title"></input></p>
          </form>
        </article>
      );
    }
  }
  export default CreateContent;

 

📌CreateContent.js

import React, { Component } from 'react';

class CreateContent extends Component{
    render(){
      console.log('Content render');
      return(
        <article>
          <h2>Create</h2>
          <form action="/create_process" method="post" onSubmit={function(e){
            e.preventDefault();
            alert("Submit~!!!!!")
          }.bind(this)}>
            <p><input type="text" name="title" placeholder="title"></input></p>
            <p>
              <textarea name="desc" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit"></input>
            </p>
          </form>
        </article>
      );
    }
  }
  export default CreateContent;

📌onSubmit 이벤트: submit 버튼을 클릭했을 때 그 버튼을 포함하고 있는 form 태그에 onSubmit 이벤트를 설치해두면 이벤트가 실행되도록 함(html 원래의 기능)

📌e.preventDefault();  : submit 버튼을 클릭했을 때 원래는 form 태그의 action이 가리키고 있는 페이지로 이동하는데 지금은 react를 이용하여 페이지 전환없이 모든 일이 가능한 애플리케이션을 만들고 있기 때문에 onSubmit 이벤트가 일어났을 때 기본적인 동작인 페이지 전환을 막는 코드

 

 

 

💡그 다음은 App 컴포넌트에 contents 맨 끝(HTML, CSS, JavaScript 그 뒤에)에 사용자가 create에서 입력한 값을 추가해야 함. 그러면 글 목록에 자동으로 추가되어야 함

 

[create 기능 구현: onSubmit 이벤트]

📌submit 버튼을 클릭했을 때 onSubmit이 실행되어야 하는데, 이때 App 컴포넌트의 contents부분의 끝에다가 데이터를 추가하는 방법

📌App.js에서 CreateContent 부분에 onSubmit 이벤트가 실행되면 _title, _desc값을 넘겨주면 setState를 통해 새로운 contents 값을 추가하도록 코드 수정

📌그리고 CreateContent.js에서 App.js에서 onSubmit이라고 하는 props를 호출하여 _title, _desc 값을 가져옴

📌App.js

}else if(this.state.mode === 'create'){
    _article = <CreateContent onSubmit={function(_title, _desc){
    //add content to this.state.contents
    console.log(_title, _desc);
  }.bind(this)}></CreateContent>
}

📌CreateContent.js

import React, { Component } from 'react';

class CreateContent extends Component{
    render(){
      console.log('Content render');
      return(
        <article>
          <h2>Create</h2>
          <form action="/create_process" method="post" onSubmit={function(e){
            e.preventDefault();
            debugger;
            this.props.onSubmit();
            alert("Submit~!!!!!")
          }.bind(this)}>
            <p><input type="text" name="title" placeholder="title"></input></p>
            <p>
              <textarea name="desc" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit"></input>
            </p>
          </form>
        </article>
      );
    }
  }
  export default CreateContent;

📌fuction(e)에 대해 이렇게 검색해보면 'onSubmit이벤트가 발생했을 때 어떻게 form에 각각의 value값을 가져올 수 있는가?'

➠ 개발자 도구에서 target은 form을 가리키는데 console 창에서 e.target.title.value 를 입력하면 아까 내가 input박스에 입력한 react가 출력. e.target.desc.value 를 입력하면 React!!!가 출력

📌그래서 _title과 _desc값을 가져오려면 onSubmit()안에 아래 코드처럼 추가/ debugger은 삭제

📌CreateContent.js

this.props.onSubmit(
  e.target.title.value,
  e.target.desc.value
);

📌내가 입력한 값이 console에서 잘 출력되는 것을 확인

📌여기까지 하면 이제 우리가 얻은 _title과 _desc값을 state에서 contents의 마지막 부분에 추가하는 작업을 해야 함