JSX문법 배열

스프레드(전개)연산자 ->흩뿌리다

 console.log("1.======================스프레드 연산자");
        const a =[1,2,3];
        const b = [...a];//...사용시 스프레드 연사자 사용임 복제하는거임
        //push는 기존 배열에 추가
        b.push(4);
        console.log(`a의 값은:${a}`);//얕은복사 1,2,3
        console.log(`b의 값은:${b}`);//깊은복사 1,2,3,4
        const c=[0,...a,4];//concat한거와 같음

concat(추가할때사용)

console.log("2.======================추가하기");
        const a2=[1,2,3];
        const b2=a2.concat(4); //여기서 push로4를 넣으면 1,2,3,4가아닌 4만 b에 들어감

        console.log(`a2의 값은:${a}`);//얕은복사 1,2,3
        console.log(`b2의 값은:${b}`);//깊은복사 1,2,3,4

filter(삭제시 사용)

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


<참고>
a3.filter((n)=>{return n!=1;})  => a3의 값들이 차례로 들어와 1이 아닌경우만 return 해줌

slice(잘라내기)

추가하기는 배열의 중간에 값을 추가할수없다. 그럼으로 잘라내기를 사용한후 추가해줘야 중간에 값을 추가할수있다

 console.log("4.======================잘라내기");//사이에 새로운것을 넣고싶다면 잘라내기후 스프레드사용
        const a4 =[1,2,3];
        const b4 = a4.slice(0,2);//(0번 부터시작)
        console.log(b4);//[1,2]
        const c4=[a4.slice(0,2)];
        console.log(c4);//[[1,2]]->배열안에 배열이 들어간 구조
        const d4=[...a4.slice(0,2),4,...a4.slice(2,3)];
        console.log(d4);//[1,2,4,3]

map(반복하기)

반복을 원하면 기본적으로 for문사용하면 되지만 jsx문법에서는 사용할수없음

 for(let i=0; i<a5.length;i++){
            console.log(a5[i]);
        }
        a5.forEach((n)=>{ console.log(n);});//리턴을 못함

 console.log("5.======================반복하기");
        const a5=[1,2,3];
 		const b5 =a5.map((n)=>n+10);//const b5=[....a5]와 같은 결과가 나오지만 
                                           //차이점은 중간에 가공할수있다는점
        console.log(`b5의 값은:${b5}`);//11,12,13

수정하기(응용)

1)id:1,name:홍길동 -> name:임꺽정 =>수정원함

 const a6 = {id:1,name:"홍길동"};
 const b6 = {...a6,name:"임꺽정"};//{id:1,name:"홍길동",name:"임꺽정"}같은 구조인데 뒤에 덮어씌운 값이 앞에 값을 가려버림
 console.log(b6)//id:1,name:임꺽정

2)name:홍길동 =>id:2인 사람의 이름을 수정원함

 const users=[
            {id:1,name:"구태모",phone:"2222"},
            {id:2,name:"이대엽",phone:"3333"},
            {id:3,name:"오승훈",phone:"4444"}
        ];
  
  const updateUserDto={
  	id:2,name:"홍길동"
  };
  
  const newUsers=users.map((n)=>{n.id === updateUserDto.id ? {...n,...updateUserDto} : n);
  
  console.log(newUsers);

실제 화면에 그려보기

function App() {
	let list=[1,2,3];
    
    return(
    <div>
      <div>{list.map((n)=><h1>{n}</h1>)}</div>
    </div>
  );
}

=>1
  2
  3