누구든지 하는 리액트 8편: 배열 다루기 (2) 제거와 수정

참고 자료

누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG

 

이제는 배열 내부의 데이터를 제거하고 수정해 보자.

 

 

데이터 제거

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

array.silce(0, 2).concat(array.slice(3, 5))
[ ...array.slice(0, 2), ...array.slice(3, 5) ];

arr 배열에서 3을 없애고 싶으면 slice와 concat을 이용하거나 배열 전개 연산자를 이용해서 구현할 수 있지만

단순히 값이 3인 걸 없내는 것이니 filter 라는 내장 함수를 이용할 수 있다.

이 함수는 특정 조건에 부합되는 원소들만 뽑아내서 새 배열을 만들어 준다.

 

array.filter(num => num !== 3);

3이 아닌 값만 필터링 해서 새 배열을 보여 주는 것이다.

이 방식으로 전화번호 정보를 데이터에서 제외시키는 기능을 구현할 수 있다.

 

 

데이터 수정

수정할 때도 마찬가지로 불변성을 지켜 줘야 한다. 기존의 배열과 그리고 내부에 있는 객체를 절대 직접 수정해서는 안 된다.

const array = [
  { id: 0, text: 'hello', tag: 'a' },
  { id: 1, text: 'world' , tag: 'b' },
  { id: 2, text: 'bye', tag: 'c' }
];

여기서 기존의 값을 건들이지 않고 id가 1인 객체의 text 값을 Korea 라는 값으로 바꾼 새로운 배열을 만들어 보겠다.

 

const modifiedArray = array.map(item => item.id === 1
  ? ({ ...item,. text: 'Korea' }) // id 가 일치하면 새 객체를 만들고, 기존의 내용을 집어넣고 원하는 값 덮어쓰기
  : item // 바꿀 필요 없는것들은 그냥 기존 값 사용