[정리]21/08/20~22 React - create,update,delete (4)

     Create 

 

1. create버튼을 만든다.

이 내용은 Control.js에 따로 저장한다.

<ul>
	<li><a href = "/create">create!</a><li>
</ul>

 

2. props 만들기

App.js

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

핸들러 만들기

Control.js

<ul>
	<li>
      <a href="/create" onClick={function(e){
          e.preventDefault()
          this.props.onChangeMode('create')>
      </a>
    </li>
</ul>

 

3. mode에 따라 태그가 바뀌게 만들자

App.js

render() {
 var _artice = null;
 
 if(this.state.mode ==='welocme'){}
 else if(this.state.mode ==='read'){}
 else if(this.state.mode ==='create'){
 	_article = <CreateContent></CreateContent>
 }
 //<Content></Content>부분을 삭제하고 대신 _article변수를 넣어준다.
 {_article}
}

4. CreateContent.js 생성

<article>
	<h2>Create!<h2>
    <form action="/create_process" method="post" onSubmit = {function(e){ 
    	e.preventDefault()
        e.target.title.value
        e.target.desc.value
        }> <!-- 사용자가 입력한 정보 -->
  		<p><input type="text" name="title" placeholder="title" /></p>  
  		<p><textarea name="desc" placeholder="title" /></p>  
  		<p><input type="submit" /></p>  
    </form>
</article>

5.

App.js

constructor(props) {
	super(props);
    this.max_content_id = 3  //초기화: 현재 데이터 갯수
}
render() {
else if(this.state.mode === 'create') {

	_article = <CreateContent onSubmit={function(_title, _desc) {
		this.max_content_id = this.max_content_id + 1;
        var _content = this.state.contents.concat(
        { id: this.max_content_id, title: _title, desc: _desc }
        )
        this.setState({ contents: _contents })
	}.bind(this)></CreateContent>
    
}

 

* push와 concat

   push: 원본이 바뀐다

   concat: 원본, 바뀐원본(새로운 데이터) 두 개가 존재하게 된다

* shouldComponentUpdate() { }

 ---> render함수 앞에 적는다.

 ---> shoudComponentUpdate()의 return값이

           true: render()실행

           false: render()실행X

---> shouldComponentUpdate(newProps, newState) { }

두 개의 인자를 갖는다.

 

* 복제

(내용은 같지만 서로 같지는 않다.)

    배열 복제:  Array.from()

    객체 복제: object.assign({}, 복제할변수)

 

 

 

 

 

 

수업을 마치며...

라이브러리

immutable.js

(플러그인)react router: url로접근할수있다.

create react app --->npm run eject(한번하면돌아갈수없음)

redux:중앙 데이터 저장소

react server side rendering

react native

 

 

 

 

 

 

 

본 포스팅은 생활코딩 React강의 내용을 바탕으로 작성되었습니다.