react.js 시작하기 190808 - 배열안 list 추가 제거 concat, slice

일단 예제부터 볼겨

import React, { Component } from 'react';

class App extends Component {
  state = {
     arr : ['멍멍','어흥','냥냥','깎깍']
  }

  render() {
    console.log(`render`,this.state.arr);
   const  list = this.state.arr.map((v,k)=>
    this.setState({
      arr: this.state.arr.slice(0,k)
      .concat(this.state.arr
        .slice(k+1,this.state.arr.length))
    })
    }} key={k}>{v}</li>
    )
    
    return (
      <div>
        <h1>App.js</h1>
        <ul>
          {list}
        </ul>
        <button onClick={()=>{						//이거는 배열에 더해주기 onDoubleClick
          this.setState({
            arr : this.state.arr.concat(`o m g`)
          })
          
        }}> bnt1 = plus </button>
        <button onClick={()=>{						//맨마지막 요소 빼기
          this.setState({
            arr : this.state.arr.slice(0,this.state.arr.length-1)
        })
      	}}>bnt2 = min </button>
      </div>
    );
  }
}

export default App;

 

1. 배열에 추가하기

// concat 사용하기
let ar = [10,20,30,40,50]

console.log(ar);    //[ 10, 20, 30, 40, 50 ]

ar.concat( 60)//추가하다 연결하다

console.log(ar);//[ 10, 20, 30, 40, 50 ] //추가 안되어있음

ar = ar.concat(60)

console.log(ar);//[ 10, 20, 30, 40, 50, 60 ] //받아짐
//ar은 원본을 유지한다.

2. 배열에서 제외하기

// slice 사용하기
//내용중에서 특정 부분을 가져옴
let br = ar.slice(0,ar.length-1)    //맨끝부분 지우기

console.log(br);

br = br.slice(1,br.length)

console.log(br);                    //맨 앞부분 지워보림

 

사실 위에 있는 예제도 

풀어서 설명해 보자면 다음과 같다.

      let forward = this.state.arr.slice(0,k)
      //console.log(`for : `,forward);
      
      let back = this.state.arr.slice(k+1,this.state.arr.length)
      //console.log(`back : `,back);
      
      let total = forward.concat(back)	//forward에 back 붙이깅
      //console.log(`total : `,total);
      this.setState({
        arr : total
      })

해당 인덱스를 제거하는 코드이다.

해당 인덱스의 앞부분을 자르고 그 인덱스 뒷부분을 자른다음 새로운 전체을 만들어서 setState하면 된다.

 

 

걍 로그다찍힌거 구현한그

import React, { Component } from 'react';

class App extends Component {
  state = {
     arr : ['멍멍','어흥','냥냥','깎깍']
  }

  //배열안에 있는거를 통재로 해서
  //concat과 slice
  //slice : 배열길이 
  //arr.pop()//이거 안됨
  
  render() {
    console.log(`render`,this.state.arr);
   const  list = this.state.arr.map((v,k)=>
    <li onClick={()=>{
    //   console.log(`list index : `,k);
    //   let forward = this.state.arr.slice(0,k)
    //   console.log(`for : `,forward);
      
    //   let back = this.state.arr.slice(k+1,this.state.arr.length)
    //   console.log(`back : `,back);
    //  let total = forward.concat(back)
    //   console.log(`total : `,total);
    //   this.setState({
    //     arr : total
    //   })

    //이렇게 하면댄다
    //let s = this.state.arr.slice(0,k)
   // let e = this.state.arr.slice(k+1,this.state.arr.length)
    
    //let r = s.concat(e)

    this.setState({
      //arr: r
      arr: this.state.arr.slice(0,k)
      .concat(this.state.arr
        .slice(k+1,this.state.arr.length))
    })

    }} key={k}>{v}</li>
    )
    
    return (
      <div>
        <h1>App.js</h1>
        <ul>
          {list}
        </ul>
        <button onClick={()=>{
          console.log(2);
          
          this.setState({
            arr : this.state.arr.concat(`o m g`)
          })
          
        }}> bnt1 = plus </button>
        <button onClick={()=>{
          this.setState({
            arr : this.state.arr.slice(0,this.state.arr.length-1)
        })
      }
    }>bnt2 = min </button>
      </div>
    );
  }
}

export default App;