[웹개발 기초 스터디] React(2) : Part2

props -> read-only(수정 금지)
states -> can be modified using this.setState

props states 모두 render() 함수를 호출

• 상위 컴포넌트가 하위 컴포넌트로 값을 전달할 땐 props로 전달
• 하위 컴포넌트가 상위 컴포넌트로 값을 바꾸고 싶을 땐 event 사용
• REDUX 는 하나의 저장소. 값이 하나 바뀌면 전체가 알아서 바뀜

 

CREATE - mode 변경

[Control.js]

...
    class Control extends Component {
        render() {
            return (
                <ul>
                
                    //1. create
                    <li><a href="/create" onClick={function(e){
                        e.preventDefault();
                        this.props.onChangeMode('create');
                    }.bind(this)}>create</a></li>
                    
                    //2. update
                    <li><a href="/update" onClick={function(e){
                        e.preventDefault();
                        this.props.onChangeMode('update');
                    }.bind(this)}>update</a></li>


				//3. delete
                    <li><input onClick={function(e){
                        e.preventDefault();
                        this.props.onChangeMode('delete');
                    }.bind(this)} type="button" value="delete"></input></li>
                
                </ul>
            );
        }
    }
    ...

create, update, delete를 각각 클릭해보면 mode값이 변환되어야 한다. 따라서 onChangeMode라는 핸들러가 실행된다.

 

• App.js에선  onCHangeMode가 호출될 떄, _mode 값으로 첫번째 인자를 받는다. 
• mode라는 변수로 현재 상태 전달
• 그때마다 App 컴포넌트 state의 mode값을 바꿈

 

App.js

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

현재 상태에 따라 mode값이 바뀐다

 

 

Create 구현 : onSubmit 이벤트

submit 버튼 클릭시 CreateContent의 이벤트로 설치된 함수 시행

 

[App.js]

  ...
    } else if (this.state.mode === 'create') {
      _article = <CreateContent onSubmit={function(_title, _subitle) {
      this.max_content_id=this.max_content_id+1;
      var _contents=this.state.contents.concat(
        {id:this.max_content_id,title:_title, subTitle:_subtitle}
      )
       this.setState({
          contents:_contents
        })
        console.log(_title, _subTitle)        
      }.bind(this)}></CreateContent>
    }
  ...

CreateContent의 onSubmit props 호출

 

[CreateContent.js]

  ...
  class CreateContent extends Component {
    render() {
        return (
            <article>
              <h2>Create</h2>
              <form action="/create_process" method="post"
                onSubmit={function(e){
                  e.preventDefault();
                  this.props.onSubmit(
                    e.target.title.value,
                    e.target.subTitle.value
                  );
                  alert('Submit!!!!');
                }.bind(this)}
              >
  ...

onSubmit 이벤트 발생시 CreateContent Component의 props.onSubmit실행

 

 

Create 구현 : contents 변경

사용자가 입력한 title과 desc값을 content 끝에 추가

 

concat/push

• push : 원본을 변경

var arr = [1,2];
arr.push(3);
console.log(arr); // [1,2,3]

• concat : 원본을 변경하지 않고 새로운 데이터 추가

var arr2 = [1,2];
var result = arr2.concat(3);
console.log(result); // [1,2,3]
console.log(arr2); // [1,2]

state에 값을 추가할 땐 push 대신 concat을 사용한다
_contents라는 변수에 넣고, 그 변수를 setState의 content의 값으로 쓴다
(기존의 setState의 값이 새로 만든 값으로 교체)

[App.js]

  ...
    } else if (this.state.mode === 'create') {
      _article = <CreateContent onSubmit={function(_title, _subTitle) {
        this.max_content_id = this.max_content_id + 1;
        var _contents = this.state.contents.concat(
          {id:this.max_content_id, title:_title, subTitle:_subTitle}
        )
        this.setState({
          contents:_contents
        })
      }.bind(this)}></CreateContent>
    }
  ...

 

create 구현 : shouldComponentUpdate

shouldComponentUpdate
- component의 render 함수를 실행 여부를 개발자가 결정할 수 있는 함수
- shouldComponentUpdate(newProps, newState) { }
  newProps, newState 두가지 매개변수를 사용함을 통해 새로 바뀐 값, 이전 값에 접근할 수 있다

return true : render 함수 실행/ return false : render함수 실행x

 

[PageNav.js]

class PageNav extends Component {
  shouldComponentUpdate(newProps, newState) {
    console.log('===> Nav render shouldComponentUpdate'
      ,newProps.data
      ,this.props.data
    )
    if (this.props.data === newProps.data) {
      return false;
    }
    return true;
  }

create 구현 : immutable

immutable

•  원본을 바꾸지 않는다. == 불변성
• 구현을 단순하게 유지해서 더 높은 복잡성에 도전

배열: Array.from()

• 배열을 복제
• 복제한 결과물(b)은 원본(a)과 배열의 내용이 같을 뿐 완전히 다른 배열이다.

var a = [1,2];
var b = Array.from(a);
b.push(3);
console.log(a, b, a===b); // [1,2] [1,2,3] false

객체: Object.assign()

• 객체를 복제

var a = {name:'ha'};
var b = Object.assign({}, a);
console.log(a, b, a===b); // {name:'ha'} {name:'ha'} false

var a = {name:'ha'};
var b = Object.assign({}, a);
b.name = 'na'
console.log(a, b, a===b); // {name:'ha'} {name:'na'} false

var a = {name:'ha'};
var b = Object.assign({left:1, right:2}, a);
b.name = 'na'
console.log(a, b, a===b); // {name:'ha'} {left:1, right:2, name:'na'} false

update

read기능과 create기능이 결합된 기능이다. create 처럼 form 이 있어야하고 기존의 컨텐츠를 수정하는 작업이기 때문에read처럼 기존 contents를 불러와 from에 내용을 추가해 준다.

update : form

[UpdateContent.js]

import React, { Component } from 'react';

class UpdateContent extends Component{

// 가변적인 데이터를 state화 시켜준다.
    constructor(props) {
      super(props);
      this.state = {
        title:this.props.data.title,
        subTitle:this.props.data.subTitle
      }
      this.inputFormHandler=this.inputFormHandler.bind(this);
    }
    inputFormHandler(e){
    	this.setState({[e.target.name]:e.target.value});
    }
    
    render(){
      console.log(this.props.date);
      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"
                    // update버튼을 클릭했을 때, title input값 안에 원본 value남아있도록 함
                    value={this.state.title}
                    onChange=onChange={this.inputFormHandler}>
                    ></input>
                </p>
                <p>
                    <textarea 
                      name="subTitle" 
                      placeholder="subTitle"
                      value={this.state.subTitle}
                      onChange={this.inputFormHandler}>
                      
                      //onChange={function(e){
                	  //this.setState({
                  	  //subTitle:e.target.value})
              		  //}.bind(this)}
              
                    ></textarea>
                </p>
                <p>
                    <input type="submit"></input>
                </p>
              </form>
            </article>
      );
    }
  }
  export default UpdateContent;

update를 클릭하면, UpdateContent에 데이터가 주입된다.

 

DELETE 

• 선택한 항목의 id값 삭제
• slice 활용

<Control onChangeMode={function (_mode) { 
          if(_mode==="delete"){
            if(window.confirm('Really ?!')){
              var _contents=Array.from(this.state.contents);
              var i=0;
              while(i<_contents.length){
                if(_contents[i].id===this.state.selected_content_id){
                  _contents.splice(i,1); //slice를 사용하여 i번째이후 1개의 배열 삭제
                  break;
                }
                i+=1;
              }
              this.setState({ //삭제한 contents를 세팅하고 welcome으로 mode 변경
                mode:'welcome',
                contents:_contents
              });
              alert('deleted');
            }
          }else{
            this.setState({ mode: _mode });
          }
        }.bind(this)}></Control>