[React] 배열 다루기

송나은·2021년 3월 6일

>wecode [Foundation]

목록 보기

8/13

불변성 유지

리액트에서 state 내부의 값을 직접적으로 수정하면 안된다.
-> push, splice, unshift, pop 내장함수 xxxxxxx
ex) this.state.array.push('some value')

1. 데이터 추가

  handleCreate = (data) => {
    const { information } = this.state;
    this.setState({
      information: information.concat({ id: this.id++, ...data })
    })

2. 데이터 렌더링

리액트는 배열을 렌더링할 때 값을 통해 업데이트 성능을 최적화한다.

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;

defaultProps info라는 객체를 받아올 때 info가 undefined일 때는 내부의 값을 받아올 수 없기 때문에 기본값을 설정해주어야 한다.

export default 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;

map 함수

data라는 배열을 가져와서 JSX로 변환해준다.
map() 내부에 있는 element에 key값을 넣어 안정적인 고유성을 부여한다.

Each child in a list should have a unique "key" prop.
key값을 설정하지 않은 경우 위와 같은 오류가 발생한다.

리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용한다.(=ID)

index를 key로 사용할 경우 state와 관련된 문제가 발생하거나 성능이 저하될 수 있다.

3. 데이터 제거

배열을 가지고 연습하기.

arr =[1, 2, 3, 4, 5] 배열에서 '2' 제거하는 방법

arr.slice(0,1).concat(arr.slice(2,5))
[...arr.slice(0,1), ...arr.slice(2,5)]
arr.filter(nums => num !== 3);

 handleRemove = (id) => {
    const { information } = this.state;
    this.setState({
      information: information.filter(info => info.id !== id)
    })
  }

4. 데이터 수정

 handleUpdate = (id, data) => {
    const { information } = this.state;
    this.setState({
      information: information.map(
        info => id === info.id
          ? { ...info, ...data } // 새 객체를 만들어서 기존의 값과 전달받은 data 을 덮어씀
          : info // 기존의 값을 그대로 유지
      )
    })
  }