React 배열(concat, filter, map, slice, 스프레드(전개) 연산자)

2023.04.03 React 배열

1. 스프레드 연산자(...)

console.log('1.============= 스프레드 연산자');
const a = [1, 2, 3];
const b = [...a];

b.push(4); // b의 데이터 변경
console.log(`a의 값은: ${a}`);
console.log(`b의 값은: ${b}`);

스프레드 연산자로 추가하기

concat은 뒤에만 추가되는데
스프레드 연산자를 이용하면 앞,뒤 추가가 가능하다.

const c2 = [0,...a, 4];
console.log(`c2의 값은: ${c2}`);

2. 추가하기(concat)

console.log('2.============= 추가하기(concat)');
const a2 = [1, 2, 3];
const b2 = a2.concat(4);
console.log(`a2의 값은: ${a2}`);
console.log(`b3의 값은: ${b2}`);

3. 걸러내기(filter)

console.log('3.============= 걸러내기(filter)'); // 삭제할때 사용
const a3 = [1, 2, 3];
const b3 = a3.filter((n) => {
return n != 1;
}); // boolean을 return -> true만 걸러낸다.
console.log(`b3의 값: ${b3}`);

4. 잘라내기(slice)

console.log('4.============= 잘라내기(slice)');
const a4 = [1, 2, 3];
const b4 = a4.slice(0, 2); // 0~1까지
console.log(`b4의 값: ${b4}`); // [1,2]

// 슬라이스한 값 배열안에 넣으면 배열안에 배열 형태가 된다. 이럴때 스프레드 연산자 사용.
const c4 = [a4.slice(0, 2)];
console.log(`c4의 값: ${c4}`); // [[1,2]]

// 슬라이스와 스프레드로 중간에 데이터 삽입하기
const c5 = [...a4.slice(0,2), 4, ...a4.slice(2,3)];
console.log(`c4의 값: ${c4}`); // [1,2,4,3]

5. 반복하기(map)

map은 반복하는 중간중간에 행동을 더 할 수 있다.

console.log('5.============= 반복하기(map)');
const a5 = [1,2,3];

// 반복하는 방법. 1.for문 2.forEach 3.map
for(let i = 0; i<a5.length; i++) {
    console.log(a5[i]);
}

a5.forEach((n) => {console.log(n)}) // 리턴 못함(void)

const b5 = a5.map((n) => n); // const b5 = [...a5];
console.log(`b5의 값: ${b5}`);

객체 내용 변경하기

스프레드 연산자를 이용해서 객체 내용을 변경해보자.

객체가 1개 일때

const a6 = { id:1 , name:"홍길동" };
const b6 = { ...a6, name:"임꺽정" };

배열뿐만 아니라 객체에도 스프레드 연산자를 사용할 수 있다.
배열을 복사해서 b6에 넣을때 변경할 데이터를 함께 전달해주면 다른 복잡한 과정없이 내용을 수정할 수 있다.

변수값으로 변경하기

변경할 데이터를 변수에 넣었을 때는
변수도 스프레드 연산자를 이용해서 뿌려주면 된다.

const data = { phone: '2222' };
const a7 = {
  id: 1,
  name: '홍길동',
  phone: '1111',
  age: 17,
  gender: '남',
};
const b7 = { ...a7, ...data };

배열안에 객체값 수정하기

users의 2번째의 name을 변경하고 싶다.
kim -> hong(updateUserDto)

수정된 값을 제외하고도 users의 모든 데이터를 가지고 있어야하니
filter를 사용하면 해당 데이터만 반환되기 때문에 사용하면 안되고
map을 사용해야한다.

삼항연산자를 이용해서
id가 일치하면 배열과 수정내용을 복사.

const users = [
  { id: 1, name: 'hong', phone: '222' },
  { id: 2, name: 'kim', phone: '333' },
  { id: 3, name: 'lee', phone: '444' },
];

const updateUserDto = { id: 2, name: 'hong' };

const newUser = users.map((user) =>
  user.id === updateUserDto.id ? { ...user, ...updateUserDto } : user,
);