JSX 배열 관련 함수

• 따라하며 배우는 리액트 A-Z를 수강하며 개인적으로 메모한 내용 입니다.

---

... (전개 연산자)

특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길때 사용

const arr1 = [Jan, Feb];
const arr2 = [Mar, Apr];
const arr3 = [May, Jun];

const arrWrap = [...arr1, ...arr2, ...arr3];
console.log(arrWrap); //[Jan, Feb, Mar, Apr, May, Jun]

---

filter() : array

배열에서 조건을 만족하는 배열의 요소만 모아 새로운 배열로 반환

<배열형 변수>.filter( <요소> => <조건식>);

const numArray = [1, 2, 3, 4, 5];
const result = numArray.filter(num => num > 3);

console.log(result);   // [4, 5]

응용1: 배열 내 특정 요소 삭제

//id값이 일치하는 데이터 삭제 
let newData = Data.filter((data) => data.id !== id);
setData(newData);
      

---

splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경

<배열형 변수>.splice(<인덱스>, <제거할 요소 개수>, <교체할 값(생략가능)>)

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
console.log(months); //["Jan", "Feb", "March", "April", "June"]