react.js 시작하기 190807 - Map() 사용하기

map()은 다음과 같이 사용한다

let ar = [10,20,30,40]//이거능 기본
 
console.log(ar);
//결과 배열 : 적당하게 가공하여 얻은
let br =ar.map((n)=>{
    console.log(n);
    return n*10
})
console.log(br);	//[ 100, 200, 300, 400 ]

배열을 순차적으로 순회하면서 어떠한 것을 수행한다.

arr.map(callback, [thisarg])

일단 map에 줘야할 인수는 위와 같다.

let cr =ar.map((n,k)=>{//k는 index번호
    console.log(n);
    return n*k
})
console.log(cr); //[ 0, 20, 60, 120 ]
 
let dr = [
    {a : 10,b:20}
    ,
    { c: 30, d:40}
]
 
let er = dr.map((v,k)=>{
    console.log(v,k);
    return v
})
console.log(er);//[ { a: 10, b: 20 }, { c: 30, d: 40 } ]

이 것을 활용하여 배열을 li태그로 반복 출력해보쟈!

class App extends Component {
  state = {
    ar : [`어흥`,`꿀꿀`,`까깎`]
  }
  render() {
    const br = this.state.ar.map((v,k)=><li key={k}>{v}</li>)
 
    return (
      <div>
        <ul>
          {br}
        </ul>
      </div>
    );
  }
}

요라면

요래 나온당