[React Study] 생활코딩 React - 17.1 컴포넌트 이벤트 만들기 ~ React - 22. 수업을 마치며

 

React - 17.1. 컴포넌트 이벤트 만들기

    return (
      <div className="App">
        <Subject 
        title = {this.state.subject.title} 
        sub = {this.state.subject.sub}>
        </Subject>
        {</*header>
            <h1><a href ="/" onClick={function(e){
              console.log(e);
              e.preventDefault();
              this.setState({
                mode:'welcome'
              });
              alert('hi');
            }.bind(this)}>{this.state.subject.title}</a></h1>
            {this.state.subject.sub}
          </header>*/}
        <TOC data = {this.state.contents}></TOC>
        <Content title = "HTML" desc = {_desc}></Content>
      </div>
    );

- header 태그를 주석처리하고 원래 쓰던 태그 살림

- 이벤트 처리를 하고 싶다면 onChangePage 이벤트를 쓸 수 있음

- a 태그가 클릭되었을 때 설치한 함수를 실행해 줌

- 우리가 만드려고 하는 Subject 컴포넌트는 onChangePage 이벤트가 있어서 이 컴포넌트 안에서 링크를 클릭했을 때 이벤트에 설치한 함수를 만드려고 함

<div className="App">
        <Subject 
          title = {this.state.subject.title} 
          sub = {this.state.subject.sub}
          onChangePage={function(){
            alert('hihihi');
          }.bind(this)}
        >
        </Subject>

- App.js에 추가

- onChangePage

 

        <header>
            <h1><a href ="/" onClick={function(e){
              e.preventDefault();
              this.props.onChangePage();
            }.bind(this)}>{this.props.title}</a></h1>
            {this.props.sub}
        </header>

- Subject.js에 추가

- 링크 태그에 onClick 속성 추가해주고 preventDefault로 페이지 리로드되지 않게 만듬

- onChangePage 함수 실행

 

- WEB을 눌렀을 때 실행이 잘 되는것을 확인할 수 있음

 

    return (
      <div className="App">
        <Subject 
          title = {this.state.subject.title} 
          sub = {this.state.subject.sub}
          onChangePage={function(){
            this.setState({mode:'welcome'});
          }.bind(this)}
        >

- alert 줄을 지우고 mode change 추가

- WEB을 누르니 모드가 잘 바뀌는 것을 볼 수 있음

 

React - 17.2. 컴포넌트 이벤트 만들기

글 목록을 클릭했을 때 App component의 state mode를 read로 바꾸고 클릭한 것에 해당되는 컨텐트가 본문에 출력되도록 함

 

        <TOC onChangePage={function(){
          this.setState({mode:'read'});
        }.bind(this)} 
        data = {this.state.contents}
        ></TOC>

- App.js TOC 수정

 

      while(i < data.length){
        // key 값을 지정해 주어야 오류가 발생하지 않음
        lists.push(<li key = {data[i].id}>
            <a 
              href = {"/contents/" + data[i].id}
              onClick={function(e){
                e.preventDefault();
                this.props.onChangePage();
              }.bind(this)}
              > {data[i].title} </a>
          </li>);
        i = i + 1;
      }

- TOC.js 수정

 

React - 17.3. 컴포넌트 이벤트 만들기

      selected_content_id_2,

- 2번일 때 실행

  render() {
    console.log('App render');
    var _title, _desc = null;
    if(this.state.mode === 'welcome'){
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
    }
    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;
      }
    }

- while문으로 id가 2일 때 title과 desc에 값을 넣어줌

- TOC에서 함수를 호출할 때 우리가 클릭한 항목의 id 값을 주면 되지 않을까?

 

        <TOC onChangePage={function(id){
          this.setState({
            mode:'read',
            selected_content_id:Number(id)
          });
        }.bind(this)} 
        data = {this.state.contents}
        ></TOC>

- App.js 에서 TOC 변경

 

            <a 
              href = {"/contents/" + data[i].id}
              data-id={data[i].id}
              onClick={function(e){
                e.preventDefault();
                this.props.onChangePage(e.target.dataset.id);
              }.bind(this)}
              > {data[i].title} </a>

- TOC.js에서 onChangePage 값 변경

 

- HTML, CSS, JavaScript를 누를 때 값이 바뀌는 것을 알 수 있음

 

React - 18. 베이스 캠프

state -> 수정할 때 set.state로 수정 가능

- props : read-only, cannot be modified 수정 불가능

state와 props를 적절히 사용해야 함

- 사장과 직원 개념으로 비유하면 사장 -> state, 직원 -> props

- 사장이 일 목록을 만들면 직원은 목록에 있는 것을 골라서 일을 처리할 수 있지만 직원이 새로운 일을 하려면 이벤트를 만들어 사장에게 허락을 구해야 함

 

React - 19. create 구현 : 소개

CRUD : Create Read Update Delete

 

React - 19.2 create 구헌 : mode 변경 가능

Control.js

import { 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.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 type="button" value="delete" onClick={function(e){
            e.preventDefault();
            this.props.onChangeMode('delete');
          }.bind(this)}></input></li>
        </ul>
      );
    }
  }

  export default Control;

- Subject.js를 복사해 Control.js 만들기

- create, update, delete 모드 만들기

 

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

- App.js에 추가

- 속성 누르면 모드가 변경되도록 함

 

- 모드가 잘 변경되는 것 확인

 

React - 19.3. create 구현 : mode 전환 기능

import { 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;

- ReadContent 제작하기

- Content를 수정하기

 

import { Component } from 'react';

class CreateContent extends Component{
    render(){
      console.log('Content render');
      return(
        <article>
          <h2>Create</h2>
          <form>
            
            </form>
        </article>
      )
    }
  }

  export default CreateContent;

- CreateContent 제작

 

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

- article을 추가하고, Content가 있었던 곳에 {_article}로 수정

 

- ReadContent가 잘 보이는 것 확인

 

      _article =  <ReadContent title={_title} desc={_desc}></ReadContent>
    } else if(this.state.mode === 'create'){
      _article = <CreateContent></CreateContent>
    }

- App.js에 코드 추가

 

- App mode가 create일 때 CreateContent가 보임

 

React - 19.4. create 구현: form

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

- CreateContent.js에서 form 안을 작성

- placeholder : 폼 안의 값이 아무것도 없을 때 'title' 출력하는 것

 

      mode: 'create',

 - App.js의 mode의 기본값을 create로 설정

 

            <p><input type="text" name="title" placeholder="title"></input></p>  
            <p>
              <textarea name="desc" placeholder="descripttion"></textarea>
            </p>
            <p>
              <input type="submit"></input>

- CreateContent 내용 추가

 

          <form action="/create_process" method="post" onSubmit={function(e){
            e.preventDefault();
            alert('Submit !!');
          }.bind(this)}>

 

- 페이지 로딩이 되지 않게 함

 

React - 19.5. create 구현: onSubmit 이벤트

          <form action="/create_process" method="post" onSubmit={function(e){
            e.preventDefault();
            this.props.onSubmit(
              e.target.title.value,
              e.target.desc.value
            );

- CreateContent.js에서 e.target.title.value와 e.target.desc.value 추가

- 폼에 내용을 입력했을 때 콘솔에서 입력한 값이 보이는 것을 알 수 있음

 

React - 19.6. create 구현: contents 변경

    this.max_content_id = 3;

- App.js에 추가

 

        this.max_content_id = this.max_content_id + 1;
        this.state.contents.push(
          {id:this.max_content_id, title:_title, desc:_desc}
        );
        this.setState({
          contents:this.state_contents
        });

- 리액트에 나중에 성능을 추가할 때 힘들 수 있는 코드

- concat : 원본을 변경한 새로운 배열이 리턴됨

- push와 같은 오리지널 데이터를 수정하는 것을 쓰지 말고 concat을 쓸 것 

 

        var _contents = this.state.contents.concat(
          {id:this.max_content_id, title:_title, desc:_desc}
        )

- 성능 개선을 위해 좋은 방법

 

React - 19.8. create 구현: immutable

immutable : 원본이 불변한다

 

React - 20.1. update 구현

import { Component } from 'react';

class UpdateContent extends Component{
    render(){
      console.log('UpdateContent render');
      return(
        <article>
          <h2>Update</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"></input></p>  
            <p>
              <textarea name="desc" placeholder="descripttion"></textarea>
            </p>
            <p>
              <input type="submit"></input>
            </p>
          </form>
        </article>
      )
    }
  }

  export default UpdateContent;

- UpdateContent.js 제작

 

    } else if(this.state.mode === 'update'){
      _article = <UpdateContent onSubmit={function(_title, _desc){
        this.max_content_id = 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)}></UpdateContent>
    }
    console.log('render', this);

- App.js로 추가

 

- update를 눌렀을 때 잘 전환

 

 

React - 20.2. update 구현 : form

props의 데이터는 read only니까 수정하지 못함

UpdateContent.js

value={this.props.data.title}

- 수정 불가

 

    constructor(props){
      super(props);
      this.state = {
        title:this.props.data.title
      }
    }

- 추가해도 수정이 되지 않음

- input의 값을 바꿨을 때 state의 값도 바뀌게 해야 함

 

    inputFormHandler(e){
      this.setState({[e.target.name]:e.target.value});
    }

- 현재 target의 이름을 알게 해주는 것

 

this.inputFormHandler = this.inputFormHandler.bind(this);

- binding이 된 것으로 this를 바꿔줌

 

onChange={this.inputFormHandler}

- 코드를 보다 더 깔끔하게 만들어 줌

 

React - 20.3. update 구현 : state 변경

<input type="hidden" name="id" value={this.state.id}></input>

- 사용자 눈에 보이지 않게 하는 것

 

Array.from(this.state.contents);

- 자바스크립트를 복제한 새로운 Array 만들어짐

 

        function(_id, _title, _desc){
          var _contents = Array.from(this.state.contents);
          var i = 0;
          while(i < _contents.length){
            if(_contents[i].id === _id){
              _contents[i] = {id:_id, title:_title, desc:_desc}
              break;
            }
            i = i + 1;
          }

- App.js 수정

 

- 잘 변경되는 것 확인

 

        this.setState({
          contents:_contents,
          mode: 'read'

- 각자 create, update가 실행되고 나서 mode를 read로 변경해주는 코드 추가

 

- create 이후 추가한 스크립트가 눈에 바로 보이는 것을 알 수 있음

 

React - 21.delete 구현

        <Control onChangeMode = {function(_mode){
          if(_mode === 'delete'){
            if(window.confirm('really?')){
              var _contents = Array.from(this.state.contents);
              var i = 0;
              while(i < this.state.contents.length){
                if(_contents[i].id === this.state.selected_content_id){
                  _contents.splice(i, 1);
                  break;
                }
                i = i + 1;
              }
              this.setState({
                mode:'welcome',
                contents:_contents
              })
            }
          } else{
            this.setState({
              mode:_mode
            })
          }
        }.bind(this)}></Control>

- App.js에 삭제 기능 추가

 

- delete 버튼을 누르면 really? 라는 창이 뜨고

 

- 삭제되었다는 문구

 

- 잘 삭제되었고 welcome으로 돌아간 것을 볼 수 있음