생활코딩 react (19.2. create 구현 - mode 변경 기능)

# React-19.2. create 구현 -  mode 변경 기능

 

1. button 영역 추가

: src\App.js - rander의 toc 컴포넌트 다음에 버튼영역 추가
<ul>
  <li><a href="/create">create</a></li>
  <li><a href="/update">update</a></li>
  <li><input type="button" value="delete"  ></input></li>
</ul>

2. 추가한 button 영역을 컴포넌트로 추출 : Control

: app.js - import 영역 추가
import Control from './components/Control';

: app.js - rander 영역 추출코드로 변경
<Control></Control>

: Control.js 추가
import React, { Component } from 'react';

export class Control extends Component {
  render() {
    console.log("Control render");
    return (
        <ul>
          <li><a href="/create">create</a></li>
          <li><a href="/update">update</a></li>
          <li><input type="button" value="delete"></input></li>
        </ul>
    );
  }
}

export default Control; // app.js에서 중괄호 없이 import 가능

3. app.js에서 Control 영역에 그려진 li 항목 선택시 이벤트 발생

 - Control 클릭시 app.js의 mode 정보 수정

3.1 Control 컨트롤러에 이벤트를 추가하여 app.js에 정의될 사용자 이벤트함수 호출

: Control.js - 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"></input></li>
</ul>

3.2 Control 컨트롤러 클릭시 호출할 사용자 이벤트 함수 정의

: app.js - return에서 호출하는 Control에 사용자 이벤트 함수 추가

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

 

* 다음 기능

 - mode(create, update, delete) 값에 따라 Content 표시영역 변경되도록 수정