[ React ] 리액트 반복함수 - (map , slice , concat , spread 사용 예제)

리액트 반복함수

리액트에서 반복적인 내용을 효율적으로 보여주고 관리하는 방법이 있습니다. 자바스크립트 배열 함수를 사용 하는 것 인데요 , ES6문법과 배열을 다루는 법에 대해서 정리를 하면 좋을 것같습니다. 

우선 , 프로젝트를 생성합니다. 

$ create-react-app dh-use-map 

다음 프로젝트로 들어가서 

$ cd dh-use-map

프로젝트를 실행합니다. 

$ yarn start

다음 화면이 뜨면 성공입니다. 

 App.js를 변경 해보겠습니다. 다음, 리액트에서 map을 테스트 하기위해서 MapTest.js를 만들겠습니다.

import React, { Component } from 'react';
import './App.css';
import MapTest from './MapTest';
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <MapTest />
        </header>
      </div>
    );
  }
}
export default App;

App.js를 변경 해보겠습니다. 다음, 리액트에서 map을 테스트 하기위해서 MapTest.js를 만들겠습니다.

import React, { Component } from 'react';
class MapTest extends Component {
  state = {
    seasons: ["봄", "여름", "가을", "겨울"]
  }
  render() {
    const { seasons } = this.state;
    const seasonList = seasons.map(
      (season, i) => (
        <li key={i}>{season}</li>
      )
    );
    return (
      <div>
        <ul>
          {seasonList}
        </ul>
      </div>
    );
  }
}
export default MapTest;

간단한 map()을 사용한 예제를 만들어 보았습니다.  state에서 seasons변수에 배열로 데이터를 담고 , render()내부에서 map함수를 사용하였습니다.  여기에서 핵심은 map을 사용할때 태그에 key 값을 제공해 주어야 한다는 것입니다.  각자 다른 key값을 제공 해주어야 하기 때문에 map의 두번째 i(index)를 설정해 줍니다. 

이제 input을 통해 데이터를 추가해보는 기능을 구현해 보겠습니다. input 관련 이벤트 핸들링 은 여기를 확인해주세요. 

import React, { Component } from 'react';
class MapTest extends Component {
  state = {
    seasons: ["봄", "여름", "가을", "겨울"],
    name: ""
  }
  mapTestChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  mapTestClick = (e) => {
    this.setState({
      seasons: this.state.seasons.concat(this.state.name),
      name: ""
    })
  }
  render() {
    const { seasons, name } = this.state;
    const { mapTestChange, mapTestClick } = this;
    const seasonList = seasons.map(
      (season, i) => (
        <li key={i}>{season}</li>
      )
    );
    return (
      <div>
        <input type="text"
          name="name"
          placeholder="계절을 입력해주세요."
          value={name}
          onChange={mapTestChange}
        />
        <button onClick={mapTestClick}>추가</button>
        <ul>
          {seasonList}
        </ul>
      </div>
    );
  }
}
export default MapTest;

여기에서 추가를 하는 데 concat을 사용한다는 것입니다. 

  mapTestClick = (e) => {
    this.setState({
      seasons: this.state.seasons.concat(this.state.name),
      name: ""
    })
  }

사용방법은 간단하게 기존배열에 [].concat(데이터) 형식으로 붙이면 배열의 마지막 부분에 배열이 추가됩니다. 기존에 .push()와 같은 함수를 사용 하지않고 concat() 을 사용 하는 이유는 .push()는 순수함수가 아니기 때문에 개발을 하는데 있어서 문제가 발생하여 순수함수로 작업을 하여야합니다. 

정확하게 작업을 하셨으면 , 다음과 같은 화면이 나옵니다.

이제 마지막으로 , 삭제 이벤트를 스프레드 함수를 사용하여 작업을 해보겠습니다. 

 import React, { Component } from 'react';

class MapTest extends Component {
  state = {
    seasons: ["봄", "여름", "가을", "겨울"],
    name: ""
  }
  mapTestChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  mapTestClick = (e) => {
    this.setState({
      seasons: this.state.seasons.concat(this.state.name),
      name: ""
    })
  }
  mapTestDeleteClick = (i) => {
    this.setState({
      seasons: [
        ...this.state.seasons.slice(0, i),
        ...this.state.seasons.slice(i + 1, this.state.seasons.length)
      ]
    })
  }
  render() {
    const { seasons, name } = this.state;
    const { mapTestChange, mapTestClick, mapTestDeleteClick } = this;
    const seasonList = seasons.map(
      (season, i) => (
        <li key={i} onClick={() => this.mapTestDeleteClick(i)}>{season}</li>
      )
    );
    return (
      <div>
        <input type="text"
          name="name"
          placeholder="계절을 입력해주세요."
          value={name}
          onChange={mapTestChange}
        />
        <button onClick={mapTestClick}>추가</button>
        <ul>
          {seasonList}
        </ul>
      </div>
    );
  }
}
export default MapTest;

우선 삭제하고자 하는 것을 클릭하면 삭제하도록 onClick 이벤트를 걸고 고유의 파라미터로 index값을 넘겨 줬습니다. 다음 스프레드 와 slice()를 활용하여 선택한 부분의 index를 뺴내는 작업을 하면 됩니다. 스프레드 함수 관련 하여 어려우신 분들은 여기를 참조하시면 됩니다.

  mapTestDeleteClick = (i) => {
    this.setState({
      seasons: [
        ...this.state.seasons.slice(0, i),
        ...this.state.seasons.slice(i + 1, this.state.seasons.length)
      ]
    })
  }

사용방법은 간단하게 기존배열에 [].concat(데이터) 형식으로 붙이면 배열의 마지막 부분에 배열이 추가됩니다. 기존에 .push()와 같은 함수를 사용 하지않고 concat() 을 사용 하는 이유는 .push()는 순수함수가 아니기 때문에 개발을 하는데 있어서 문제가 발생하여 순수함수로 작업을 하여야합니다. 

정확하게 작업을 하셨으면 , 다음과 같은 빼고 넣고를 자유롭게 사용 할 수 있습니다 .