react 기본문법 2 배열, 배열수정하기

 

 

불변함수 -> 깊은 복사 함수 

 

1. spread (전개) 연산자

2. concat  (추가하기) 

3. filter  걸러내기  (삭제시 사용) 

4. slice  잘라내기 

5. map  

 

 

 

 

 

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

[...a]를 사용하면 배열을 복사한다.  b의 값에 4를 넣고 확인을 해보았다. 

이런식으로 복사해서 추가하는데 사용할 수 있다. 

결과값

 

 

 

2. concat  (추가하기) 

a2에 4를 추가한 값이 b2에 들어간다.  - 깊은 복사 

 

만약 a2.concat(4)  이 아닌 a2.push(4)를 할 경우에는 b2의 값은 4만 출력된다. 

 

 

3. filter  걸러내기  (삭제시 사용) 

 

 

 

const b3 = a3.filter((n) => {  return n != 1;  });

filter 안에는 함수가 들어간다.  ( )=>{ };

filter 함수는 bool을 return 받는다.

 

console 값

 

 

4. slice  잘라내기

slice는 시작인덱스부터 2인덱스까지 범위를 지정한다. 2번 인덱스까지는 2번인덱스를 제외한다는 것이된다.

 

 

5.  반복하기 

• forEach
• map

forEach를 사용하면 위의 코드처럼 콜백함수를 적어줘야 한다. 

()=> {} 를 사용한다. 

forEach 문은 리턴값을 받지 못하기 때문에 다른 변수에 값을 넘겨줄 수 없다. 

 

map 함수는 forEach문과 반대로 리턴을 해준다. 

결과값

map을 사용해서  결과값 [1,2,3]을 볼 수 있다. 

그렇다면 첫번쨰 다뤘던 spread 연산을 하면 되지 않을 까?    

위의 코드를 보면 spread 연산을 통해 값은 같게 나오는 것을 알 수 있다. 그러다면 다른 부분이 무엇일까?

 

map의  장점은  각각의 값을 가공할 수 있다. (리턴가능)

리턴을 하여 b5에 호출한다.  

 

---

 

배열 수정하기 

 

데이터 한개 수정

 

위의 코드에서 보듯이 a6의 변수에 아이디와 이름을 준다. 

그것을 spread하여 b6에서 받아오는데 중요한 점은 그 다음 값을 정의하면 수정이 가능하다는 점이다. 

name을 혁준으로 적게 되면 값이 홍길동에서 혁준으로 수정이 된다. 값을 덮어씌우기 때문이다. 

 

spread 를 사용하는 것이 좋은 이유는 이름외에도 사용자의 정보값이 나이, 성별, 전화번호 등의 여러 요소가 있는데 

그것을 전부 적고 값을 수정하는 것보다 spread 전개 연산자를 사용하면 보다 간편한 방법이 된다. 

 

 

출력값

 

 

데이터 여러개 수정 

 

 

 

아래의 코드를 보면 여러개의 데이터가 묶음으로 들어있는 것을 볼 수 있다. 이 경우에는 앞서 배운 map()함수를 이용해서 값을 수정해보겠다. 

 

 

updateUserDto 를 만들어서 변경할 값을 정의한다. 

map 함수를 사용하여 리턴값을 나타내 호출한다. 

user.id 와 updateUserDto.id 가 같을 때  위의 updateUserDto에 정의한 내용으로 바꾼다.