[React] mode 변경 기능, 전환 기능

mode 변경 기능

 

Control.js

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;

 

CRUD에서 create 기능을 만들기 위해 컴포넌트를 분리하였습니다. Control 컴포넌트로 전달될 때에는 props 형태로 전달되게 됩니다.

여기서 Control의 onChangePage로 함수가 전달되게 되는데 그 함수를 호출해주면 됩니다. 

 

App.jsx

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

App 컴포넌트에서 이벤트 핸들러가 실행되어 onChangeMode가 실행될 때 mode를 인자로 받고 mode의 값이 현재 값으로 전달이 됩니다. 그렇게 되면 함수가 호출될 때마다 App 컴포넌트에 mode의 state를 바꾸는 code입니다.

 

---

mode 전환 기능

 

content가 create 부분과 read 부분을 구분하기 위해 Content 컴포넌트를 각각 CreateContent, ReadContent 로 분리합니다. App 컴포넌트에서는 state mode에 따라서 컴포넌트가 분리될 수 있게 분리해줍니다.

if (this.state.mode === "welcome") { // 현재 state가 
            _title = this.state.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>
        }