배열에서 데이터 제거하기

데이터를 수정하는 방법에 대해서 알아보자.

불변성을 유지하면서 작업을 처리해줘야 한다.

 

배열안에 들어있는 데이터를 불변성을 지키면서 제거할 때는 JS 내장함수 .slice 또는 .filter를 통해서 할 수가 있다.

아래와 같이 slice를 사용하는 코드를 작성하자. slice(0, 2)라고 하면 인덱스 0부터 시작해서 인덱스 2전까지의 데이터 즉 인덱스 0 1의 데이터를 가져오는 것이다.(기존의 numbers 배열은 건드리지 않는다.)

const numbers = [1, 2, 3, 4, 5];
undefined

numbers.slice(0, 2);
(2) [1, 2]

numbers.slice(0, 3);
(3) [1, 2, 3]

numbers.slice(1, 3);
(2) [2, 3]

numbers.slice(3, 5);
(2) [4, 5]

 

 

concat을 이용해서 numbers의 slice한 값 두개를 합쳐보자. 기존의 배열을 건드리지 않은 채 값을 만드는 것을 확인할 수 있다.

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

  spread operator를 사용해서 이용할 수 도 있다. 즉 slice는 배열을 잘라주는 것이다. 배열을 잘라서 붙여줄 수도 있는 것이다.

[
    ...numbers.slice(0, 2),
    10,
    ...numbers.slice(3, 5)

]
(5) [1, 2, 10, 4, 5]


numbers
(5) [1, 2, 3, 4, 5]

 

filter라는 함수를 사용하면 데이터를 제거할 때 조금 더 편할 수도 있다. 특정 조건을 가지고 값들을 필터링 해 줄수가 있다. 값이 3보다 큰 녀석들을 가져오고 싶다 그러면 filter한 다음에 n을 파라미터로 이용해 n이 3보다 크면 따로 분류, 아니면 포함시키지 않는 것으로 설정을 해줄 수가 있다.

const numbers = [1, 2, 3, 4, 5];
undefined

numbers.filter(n => n > 3);
(2) [4, 5]

만약에 3을 제외한 것들만 가져오고 싶다 그러면 아래와 같이 나타낼 수 있다. 그리고 filter함수는 기존의 배열을 건드리지 않기 때문에 numbers로 확인해 보면 남아있는 것을 볼 수 있다. 그래서 불변성을 지키면서 배열을 업데이트 해줄 수가 있는 것이다.

numbers.filter(n => n !== 3);
(4) [1, 2, 4, 5]

numbers
(5) [1, 2, 3, 4, 5]

 

리액트로 넘어와서 App 컴포넌트에서 작성한다.

제거기능 부터 먼저 구현을 해보면 제거를 할 때는 filter값을 사용하면 된다고 언급했다.

 

handleRemove라는 함수를 만들고 id값을 파라미터로 가져온다. 그리고 비구조화 할당 const { information } = this.state를 통해서 information이라는 레퍼런스를 따로 만들어준다.

그리고 this.setState를 하여서 information은 현재 information에다가 filter를 걸어서 info.id값이 파라미터로 받은 id가 아닌 값들만 필터링 해라라고 작성한다.

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

그리고 handleRemove를 PhonInfoList한테 전달을 해준다. 이제 app.js에서 할 작업은 끝난 것이다.

// App.js

render() {
    return (
      <div>
        <PhoneForm onCreate={this.handleCreate}/>
        <PhoneInfoList
          data={this.state.information}
          onRemove={this.handleRemove}
        />
      </div>
    );
  }
}

PhoneInfoList를 수정해주면 ctrl키를 누른 상태에서 PhoneInfoList누르면 파일이 바로 열린다. onRemove props로 받아왔는데 PhoneInfo한테 그대로 전달을 해준다.( render 밑에 const { data }있는 부분에 onRemove를 넣어 비구조할당을 만들어준다.)

// PhoneInfoList.js

render() {
    const { data, onRemove } = this.props;

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

PhoneInfo를 열어주고 handleRemove라는 함수를 구현해준다. info와 onRemove를 props로 받아왔고 onRemove 한 다음에 info.id를 파라미터로 전달해준다.

handleRemove값을 하단에 button을 만들어서 삭제라고 해주고 onClick 이벤트로 this.handleRemove라고 해준다.

(const { name, phone, id }있는 부분에 id값은 지워준다.)

 

이렇게 데이터를 삭제하는 기능을 완성했다.

// PhoneInfo.js

class PhoneInfo extends Component {

  handleRemove = () => {
    const { info, onRemove } = this.props;
    onRemove(info.id);
  }
  
  render() {
    const { name, phone } = this.props.info;

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

    return (
      <div style={style}>
        <div><b>{name}</b></div>
        <div>{phone}</div>
        <button onClick={this.handleRemove}>삭제</button>
      </div>
    );
  }
}

 

 

 

 

 

 

<출처 : velopert(김 민준) 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌>

https://www.inflearn.com/course/react-velopert/dashboard

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Array.prototype.slice() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Array.prototype.filter() - JavaScript | MDN