[React] react state 배열 수정하기

react state에 있는 배열의 마지막에 요소를 추가하는 방법. (불변성 유지)

 

case 1 : 이전 값(prevState)을 이용한 방법

case 2 : concat을 이용하는 방법

case 3 : spread 연산자 이용한 방법(es6)

 

이 중에서 원하는 걸 골라서 사용하면 된다.

import React, { Component } from "react";

class ArrayTest extends Component {
  state = {
    array: [1, 2, 3],
  };

  componentDidMount() {
    /** 
     * case 1 : 이전 값(prevState)을 이용한 방법
     */
    this.setState((prevState) => ({
      array: [...prevState.array, 4],
    }));

    /**
     * case 2 : concat을 이용하는 방법
     * concat은 새 배열을 반환한다.
     */
    this.setState({
      array: this.state.array.concat(4),
    });

    /** 
     * case 3 : spread 연산자 이용한 방법(es6)
     */
    this.setState({
      array: [...this.state.array, 4],
    });
  }
  render() {
    return <div>{this.state.array}</div>;
  }
}

export default ArrayTest;