map() + @

기본문법

arr.map(callback, [thisArg])

 

주의사항

map() 을 사용할때 꼭 key 값 설정을 해줘야 함

 

관련 예제

 

IterationSample Component 를 만들어서 import 시키고 랜더링 시키기

import React, { Component } from "react";
import IterationSample from "./IterationSample";
 
class App extends Component {
  render() {
    return (
      <div>
        <IterationSample />
      </div>
    );
  }
}
 
export default App;
 

IterationSample.js

import React, { Component } from "react";
 
class IterationSample extends Component {
  state = {
    names: ["눈사람", "얼음", "눈", "바람"],
    name: "",
  };
 
  handleChange = (e) => {
    this.setState({
      name: e.target.value,
    });
  };
 
  handleInsert = () => {
    this.setState({
      names: this.state.names.concat(this.state.name),
      name: "",
    });
  };
 
  handleRemove = (index) => {
    const { names } = this.state;
    this.setState({
      names: [
        ...names.slice(0, index),
        ...names.slice(index + 1, names.length),
      ],
    });
  };
 
  render() {
    const nameList = this.state.names.map((name, index) => (
      <li key={index} onDoubleClick={() => this.handleRemove(index)}>
        {name}
        {index}
      </li>
    ));
    return (
      <div>
        <input onChange={this.handleChange} value={this.state.name} />
        <button onClick={this.handleInsert}>추가</button>
        <ul>{nameList}</ul>
      </div>
    );
  }
}
 
export default IterationSample;
 

26~27번째 라인의 ...은 재개 연산자로

...뒤에 위치한 배열 값을 그대로 꺼내서 현재 배열에 복사하는 것

 

배열을 잘라내는 함수 slice() 에 대해 잘 정리해놓은 내용

im-developer.tistory.com/103

[JS/Array] slice()와 splice()의 차이점

secondmemory.kr/641

[Javascript] Array의 slice와 splice의 차이

slice 한 배열을 concat 으로 붙이는것보다

재개 연산자로 표현하는것이 코듸도 짧고 가독성이 좋다.