컴포넌트 렌더링에 이어서~~

1. 컴포넌트 만들기

• 두 개의 신규 컴포넌트 생성
  1) PhoneInfo : 각 전화번호 정보를 보여줌

import React, { Component } from 'react';

class PhoneInfo extends Component {
  static defaultProps = {
    info: {
      name: '이름',
      phone: '010-0000-0000',
      id: 0
    }
  }

  render() {
    const style = {
      border: '1px solid black',
      padding: '8px',
      margin: '8px'
    };

    const {
      name, phone, id
    } = this.props.info;

    return (
      <div style={style}>
        <div><b>{name}</b></div>
        <div>{phone}</div>
      </div>
    );
  }
}

export default PhoneInfo;

• info 객체를 props로 받아와서 렌더링해줌

• info값을 전달해주지 못할 경우 컴포넌트가 crash로 에러 발생함

• info가 undefined일 때는 비구조화 할당을 이용해 내부의 값을 받아올 수가 없기 때문

• 그래서 defaultProps로 static값을 설정했음.

  2) PhoneInfoList : 여러 개의 PhoneInfo를 보여줌

import React, { Component } from 'react';
import PhoneInfo from './PhoneInfo';

class PhoneInfoList extends Component {
  static defaultProps = {
    data: []
  }

  render() {
    const { data } = this.props;
    const list = data.map(
      info => (<PhoneInfo key={info.id} info={info}/>)
    );

    return (
      <div>
        {list}    
      </div>
    );
  }
}

export default PhoneInfoList;

key값 사용하기!!

• key값이 뭘까?!!
• 리액트에서 배열을 렌더링할 때 꼭 필요한 값
• 리액트는 배열 렌더링 시 값을 통해 업데이트 성능을 최적화함.
• key값을 쓰지 않으면 자동으로 배열의 인덱스값을 key값으로 사용하게 되는데, 그럴 경우 중간에 값이 들어가면 index가 바뀌기 때문에 key값도 바뀌는 등 비효율적이게 됨.
• key값을 지정하면 새로운 DOM은 하나만 생성되고 나머지는 그대로 유지됨.
• 지금 하고있는 프로젝트는 전화번호 정보(PhoneInfo)에서 부여하는 id값을 key값으로 사용함.

2) 컴포넌트 렌더링하기

• PhoneInfoList 컴포넌트를 App.js에서 렌더링하기.
• data값을 props로 전달하기.

import React, { Component } from 'react';
import PhoneForm from './component/PhoneForm';
import PhoneInfoList from './component/PhoneInfoList';

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} 
        />
        <PhoneInfoList data={this.state.information} />
      </div>
    );
  }
}

export default App;

• 가끔 데이터에 고유값이 없을 수 있다(우리로 치면 id값이 없는 경우)
• 그럴때면 콘솔에서 경고창이 뜨게 되는데 해당 경고창을 없애는 방법

const list = data.map(
  (info, index) => (<PhoneInfo Key={index} info={info} />)
  );

• 이 방법이 경고창을 없애주긴 하지만 성능상으로는 key값이 없는 것과 동일하니 주의

결론
배운것

• 데이터를 배열에 어떻게 등록할지
• 등록한 데이터를 어떻게 렌더링할지
• 배열을 렌더링할 때에는 꼭 고유값 key 사용하기
• 불변성 유지를 위해 데이터 조작시 기존의 배열은 건드리지 않기

배열다루기 (2) 제거와 수정

1. 데이터 제거하기

• 데이터 제거 또한 불변성을 유지하는 상태에서 데이터를 제거해야 함
• 두 가지 방법이 있음

1) slice, concat 사용

• 예제 배열

const arr = [1, 2, 3, 4, 5];

• 3을 제거한다고 했을 때 slice 와 concat으로 3 왼쪽 배열과 오른쪽 배열을 합침

arr.slice(0,2).concat(arr.slice(3,5)) // [1, 2, 4, 5]

2) 배열 내장함수 filter 활용

• 특정 조건에 부합되는 원소들만 뽑아서 새로운 배열을 만드는 함수

//filter함수의 구문
arr.filter(callback(element[, index[, array]])[, thisArg])
//[]은 optional

//사용예
arr.filter(num => num !== 3); // [1, 2, 4, 5]

• 이러한 filter함수의 특징을 이용해 전화번호 정보를 데이터에서 제외시키는 기능 추가해볼 예정