1. 배열 다루기

(1). 생성과 렌더링

• 리액트에서 배열을 다룰 때 평소 다루던 것 처럼 하면 안됨
• js에서는 데이터 추가시

this.state.array.push('value'); 

이런 식으로 push를 사용했는데, 리액트에서는 그러면 안된다.

• 불변성 유지가 중요하기 때문.
• 불변성 유지란? state 내부의 값을 직접적으로 수정하지 않는 것.
• push, splice, unshift, pop 같은 내장함수는 배열 자체를 수정하기 때문에 적합하지 않음.
• 대신 concat, slice, map, filter 같은 함수는 기존 배열에 기반해 새로운 배열을 만들어내기 때문에 이런 함수 사용해야함.
• 불변성 유지가 필요한 이유
  • 리액트에서 모든 것들이 필요한 상황에 리렌더링 되도록 설계할 수 있음.
  • 위처럼 해야 성능도 최적화할 수 있음.

1) 데이터 추가(생성)

• 앱 내 상태 데이터는 app.js에서 관리
• app 컴포넌트의 state에 information 이라는 배열을 만들고 그 안에 데이터 생성 시 저장(샘플 데이터 기본으로 2개 추가)
• id값은 데이터 식별용. 각 데이터 추가시 1씩 오름

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;

• id값은 컴포넌트의 일반 클래스 내부 변수로 추가했음. 렌더링과 상관 없는 값은 굳이 state에 넣어줄 필요 x
• information 값은 render함수에서 문자열로 변환(json.stringify)해서 렌더링.

모르는 내용

• concat, ...문법(비구조화할당), JSON.stringify
  1) concat
• 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환하는 메소드
• 기존배열 변경x
• 추가된 새로운 배열을 리턴

//사용예
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

2)비구조화 할당(구조분해 할당)

• 객체나 배열을 변수로 분해 할수 있게 해주는 문법

• 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우 유용

• 또는 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에 유용

  2-1) 배열 분해하기

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당.
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee

• 분해(destructuring)는 파괴(destructive)와 다름
  : 구조분해할당이라는 명칭은 어떤 것을 복한 이후 변수로 분해 해준다는 의미로, 분해 대상은 수정 또는 파괴되지 않음.
  : 배열의 요소를 직접 변수에 할당하는 것보다 코드 양이 줄어든다는 점만 다름.
  
  (1) '...'로 나머지 요소 가져오기
• 배열 앞쪽에 위치한 값 몇 개만 필요하고 나머지 값은 한 곳에 모아서 저장하는 기능
• '...'로 나머지(rest)요소를 가져올 수 있다.

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "Roman"];

alert(name1); // Julius
alert(name2); // Caesar

// `rest`는 새롭게 생성된 배열임.
alert(rest[0]); // Consul
alert(rest[1]); // Roman
alert(rest.length); // 2

• rest는 나머지 요소를 담은 새로운 배열이 됨.

• rest 대신 다른 이름을 사용해도 되는데, 변수 앞에 점 3개 꼭 넣고, 변수가 가장 마지막에 위치해야 함.

  3-1) 객체 분해하기

• 구조 분해 할당으로 객체도 분해할 수 있음.

//기본문법
let {var1, var2} = {var1:…, var2:…}

//예시
let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

• 예시에서 보는 것처럼 options.title, options.width, options.height에 저장된 값이 맞는 변수에 할당되었다.
• 순서는 중요하지 않음. 순서 바꿔도 이름만 같으면 맞게 할당됨.
• 객체 프로퍼티를 프로퍼티 키와 다른 이름을 가진 변수에 할당하려면 아래처럼 하면 됨.

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

// { 객체 프로퍼티: 목표 변수 }
let {width: w, height: h, title} = options;

// width -> w
// height -> h
// title -> title

alert(title);  // Menu
alert(w);      // 100
alert(h);      // 200

• 분해하려는 객체의 프로퍼티 : 목표 변수
  (1) 나머지패턴 '...'
• 분해하려는 객체의 프로퍼티 개수가 할당하려는 변수의 개수보다 많을 경우, 나머지 프로퍼티를 할당하는 방법
• ...을 사용하면 배열에서 했던 것처럼 나머지 프로퍼티를 다른 곳에 모으는 것이 가능함.
• 모던브라우저는 나머지 패턴을 지원하지만 IE 등 구식 브라우저는 나머지패턴 지원 x. (바벨 쓰면 가능)

let options = {
  title: "Menu",
  height: 200,
  width: 100
};

// title = 이름이 title인 프로퍼티
// rest = 나머지 프로퍼티들
let {title, ...rest} = options;

// title엔 "Menu", rest엔 {height: 200, width: 100}이 할당됩니다.
alert(rest.height);  // 200
alert(rest.width);   // 100

3) JSON.stringify(value)

• javaScript값이나 객체를 JSON 문자열로 반환.

JSON.stringfiy(value); //문자열로 변환된 데이터값

2) 데이터 렌더링

• 위에서 얻어낸 배열을 컴포넌트로 변환해서 렌더링
• 리액트는 자바스크립트와 비슷해서, 컴포넌트를 여러 개 렌더링하기 위해서는 js 배열의 내장함수인 map 이용하면 됨.

map 함수 잠깐 알아보기

//기본 문법
arr.map(callback(currentValue[, index[, array]])[, thisArg])

//예시
const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

(1) 컴포넌트 만들기

• 아까 만든 전화번호 배열을 표시해주기 위해 두 개의 컴포넌트 제작
• PhoneInfo : 각 전화번호 정보를 보여줌.
• PhoneInfoList : 여러 개의 PhoneInfo를 보여줌.