[React] 배열에 데이터 삽입 및 배열 렌더링 하기

0. 학습 들어가기 전

(1) Object.assign 메소드

Object.assign(target, ...sources)

• 객체를 병합하는 메소드
• sources 들이 target에 병합되는 형식 (sources = 소스 오브젝트, target = 타겟 오브젝트)
• 리턴 값은 타겟 오브젝트인 target이 됨

var obj1 = {a};
var obj2 = {b};
var obj3 = {c};
var addObj = Object.assign({}, obj1, obj2, obj3);
console.log(addObj); // {a, b, c}

(2) JSON.stringify 와 JSON.parse()

JSON.stringify(value, replacer, space)

• JSON : 브라우저와 서버사이에서 오고가는 데이터의 형식
• JSON.stringify : JSON 객체를 String 객체로 변환해주는 메소드
• JSON.parse() : String 객체를 JSON 객체로 변환해주는 메소드
• value (필수) : JSON 문자열로 변환할 값
• replacer(선택) : null 이거나 값을 쓰지 않을 경우 객체의 모든 속성들이 JSON 문자열 결과에 포함됨
• space(선택) : 가독성을 목적으로 JSON 문자열 출력에 공백을 삽입하는 데 사용됨 (String이나 number 객체 사용) null 이거나 값을 쓰지 않을 경우 공백이 사용되지 않음

//value의 데이터 타입이 string인 경우

JSON.stringify(7) //7
JSON.stringify(true) //'true'
JSON.stringify(null) //null
JSON.stringify(‘foo’) // “‘foo’”

//value가 배열일 경우

JSON.stringify([1, 'true', true]); // '[1,"true",true]'

 

참고 사이트 : https://steemit.com/kr-dev/@cheonmr/json-stringify

JSON.stringify( )란 무엇인가? — Steemit

(3) 전개연산자와 ES6 구조분해 할당

const a = [1,2,3];
const b = [4,5,6];
const c = [...a, ...b];

console.log(c) // c = [1,2,3,4,5,6]

• 전개연산자 : 배열 또는 객체들을 연결 또는 합쳐주는 역할을 함
• ES6 구조분해 할당 참고 사이트 : https://charming-kyu.tistory.com/23

[javascript] ES6 구조분해 할당 총 정리

(4) map 함수

const a = [1,2,3];

위처럼 a 배열 안의 숫자가 있다

이때 각 숫자들을 두 배씩 해주고 싶으면 map 을 이용해서 쉽게 해결해줄 수 있다

const a = [1,2,3];
const b = a.map (number => number *2);

---

1. 학습 환경 구축

(1) 컴포넌트 생성

• PhoneInfo.js : 각 전화번호 정보를 보여주는 컴포넌트
• PhoneInfoList.js : 여러 개의 PhoneInfo 컴포넌트들을 보여줌

(2) PhoneInfo.js 내용

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;

(3) PhoneInfoList.js 내용

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;

(3) App.js 내용

import React, { Component } from 'react';
import PhoneForm from './components/PhoneForm';
import PhoneInfoList from './components/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() {
    return (
      <div>
        <PhoneForm
          onCreate={this.handleCreate}
        />
        <PhoneInfoList data={this.state.information}/>
      </div>
    );
  }
}

export default App;

---

2. 컴포넌트 내용 설명

* js 에서는 push를 이용하여 배열에 데이터를 삽입할 수 있었으나, React 에서는 사용할 수 없음

 

(1) PhoneInfo.js 설명

style 지정하는 방법은 아래와 같다

// render 함수 안의 내용
const style = {
      border: '1px solid black',
      padding: '8px',
      margin: '8px'
    };
    
// return 값 안의 내용
<div style={style}></div>

info를 props로 받아와서 렌더링을 하는데 이때 defaultProps 를 이용하여 props의 기본 값을 설정합니다

static defaultProps = {
    info: {
      name: '이산도',
      phone: '010-0000-0000',
      id: 0
    }
  }
  
  //render 함수 안의 내용
  
  const {
      name, phone, id
    } = this.props.info;

그리고 return 값을 통해서 배열의 name와 phone의 값이 보여지게 됩니다

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

(2) PhoneInfoList.js 설명

props의 기본 값을 설정해주는 defaultProps을 이용하여 기본 값을 설정합니다

static defaultProps = {
    data: []
  }

data 배열을 map 함수를 통해서 JSX로 변환합니다

key의 값을 info의 id로 설정을 해줍니다

( key를 사용하게 되면 내용이 업데이트가 되었을 때 불변성 유지를 해줄 수 있습니다 )

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

(3) 실행 결과

기본 값으로 설정해둔 name 과 phone 의 내용이 화면에 보이게 되고

input과 button을 이용하여 내용을 입력해주고 input type를 submit으로 설정하게 되면 아래처럼 배열에 데이터가 삽입되는 것을 확인할 수 있다