배열 다루기

• 리액트에서 배열을 다룰 때, 자바스크립트처럼 this.state.array.push('some value')이런 식으로 하면 안된다.
• 왜냐? 불변성을 유지해야 하기 때문
• state 내부의 값을 직접적으로 수정하지 않는 것을 불변성 유지라고 함.
• 불변성을 유지해야 데이터가 필요한 상황에 따라 리렌더링이 되도록 설계할 수 있고, 그래야 나중에 성능도 최적화할 수 있음.
• 그래서 push, splice, unshift, pop같은 state를 직접적으로 변경하는 내장함수를 사용하면 안되고, 기존의 배열에 기반한 새로운 배열을 만들어내는 concat, slice, map, filter를 사용해야 함.

1. 데이터 추가하기

• App 컴포넌트에서 애플리케이션의 상태 데이터를 관리하도록 설계
• App 컴포넌트 내부에 information 이라는 배열을 만들고 배열의 기본값 두개 추가.

{
  id: 0, // 각 데이터를 식별하기 위한 id값. 데이터 추가할 때 마다 1씩 오름.
  name: '이름',
  phone: '010-0000-0000'
}

//App.js, 전체 컴포넌트 관리 페이지
import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';

class App extends Component {
  id = 2
  state = {
    information: [
      {
        id: 0,
        name: '김지민',
        phone: '010-0000-0000'
      },
      {
        id: 1,
        name: '김리액트',
        phone: '010-0000-0001'
      }
    ]
  }
  handleCreate = (data) => {
    const { information } = this.state;
    this.setState({
      information: information.concat({ id: this.id++, ...data })
    })
  }
  render() {
    const { information } = this.state;
    return (
      <div>
        <PhoneForm
          onCreate={this.handleCreate}
        />
        {JSON.stringify(information)}
      </div>
    );
  }
}

export default App;