react 배열(map, filter, slice, concat, spread연산자)

불변함수 → 깊은 복사 함수

---

컴포넌트화

한 return안에  나무를 포함하는 해배경이 있는데 해를 달로 바꾸고싶다
해를 return하는 것, 나무를 return하는 것 각각 component화 한다.
컴포넌트화를 하면 나무가 해배경에 포함되어있어도, return이 실행할지 안할지 정할 수 있다. 그것이 컴포넌트화의 장점

---

리엑트엔진

A 부모가 다시 그려지면 B 자식도 다시 그려야할지 연산을 한다.(B가 바꿀데이터를 가지고있는지)
다시 그려야하면 그리고, 안그려도되면 안그린다.
연산(오랠걸림)을 최적화하려면 깊은 복사를 해야한다.( 레퍼런스만 비교하면 끝나기 때문 = 최적화)
깊은복사해주는 함수
부모가 변경되면 자식이 변경되었는지 연산(최적화:깊은복사함수를배우는이유)을해서 리렌더링(리엑트엔진이해줌) 한다.

---

//concat, filter, map, slice, spred(전개) 연산자

console.log("1.========스프레드 연산자");
const a =[1,2,3];
const b = [...a];
b.push(4); //b의 데이터 변경
console.log(`a의 값은:${a}`); //1,2,3
console.log(`b의 값은:${b}`); //1,2,3,4

---

console.log("2.========추가하기(기존객체는보존하면서 새로운요소추가해서 새로운객체만들기)");
const a2 = [1,2,3];
const b2 = a2.concat(4);
console.log(`a2의 값은:${a2}`); //1,2,3
console.log(`b2의 값은:${b2}`); //1,2,3,4

const c2=[0, ...a2, 4];
console.log(`c2의 값은:${b2}`); //0,1,2,3,4

---

console.log("3.========걸러내기"); //삭제하기할때쓴다. 어떤 dom을 삭제하려고 클릭하면 그 dom의 아이디가 1번이면, ajax를 통해서 db에 삭제요청을 하면 ok떨어지면
1번을 필터해서 나머지 2,3만 남는데 2,3을 배열에 던져줘서 그려준다.
const a3 = {1,2,3};
const b3= a3.filter((n)=>{return n!=1}); //boolean을 return 받는다. → true만 걸러낸다.
console.log(`b3의 값은:${b3}`); //2,3

---

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

---

console.log("5.========반복하기"); //반복해서 복사하기
const a5=[1,2,3];
a5.forEach((n)=>{console.log(n}); //1,2,3 forEach문은 return을 못한다. 뿌리고 끝난다. 반복해서 복사가 안된다.
const b5=a5.map((n)=>n); //const b5=[...a5];와 같다. 하지만 map은 값 하나하나를 가공할수 있는 장점이 있다.
console.log(b5); //1,2,3 
const b5=a5.map((n)=>n+10); 

App.js에서
import './App.css';

function App() {
  let list = [1,2,3];

return(
  <div>
    <div>
       {list.map((n)=>(        //깊은복사를 쓰는이유..
         <h1>{n}</h1>
       ))}
     </div>
   </div>