React 배열

리엑트에서 부모가 변경이 되면 부모에 의존적인 자식 컴포턴트들은 연산을 통해 리렌더링을 수행한다.

이때 깊은복사를 이용해 변경하지 않아도 되는 자식들이 리렌더링하지 않게 하는 최적화 작업이 필요하고

배열을 사용한다.

---

1. spread 연산자 ( 복사 )

 

 const a = [1, 2, 3];

 const b = [...a];      // b = [1,2,3]

 b.push(4);             // b = [1,2,3,4]

 const c = [0, ...b, 5, 6]; //  c = [0,1,2,3,4,5,6]

---

2. concat ( 추가 )

 

 const a = [1, 2, 3];

 const b = a.concat(4);  // b = [1,2,3,4]

---

3. filter ( 삭제 )

true 인 값만 반환하는걸 활용

 

 const a = [1, 2, 3];

 const b = a.filter((n) => {   // b = [2,3]  

    return n != 1; 

  });                                 

---

4. slice ( 끼워넣기 )

 

 const a = [1, 2, 3];

 const b = a.slice(0, 2);   // b = 1,2

 const c = [...a.slice(0, 2), 4, a.slice(2, 3)];   // c = 1,2,4,3

---

5. map ( 수정하여 복사 )

 

 const a = [1, 2, 3];

 const b = a.map((n) => n + 1); // b = [2,3,4]

 

응용

 

 const users = [

    { id: 1, name: '침착맨', 나이: 39 },

    { id: 2, name: '주호민', 나이: 41 },

    { id: 3, name: '희민이', 나이: 38 },

  ];

 const updateUserDto = {

    id: 2,

    name: '괘도',

    나이: 39,

  };

 const newUsers = users.map((n) =>

    n.id === updateUserDto.id ? { ...n, ...updateUserDto } : n,

  );

---

- 출처 메타코딩 최주호