[React] 8. 배열 (스프레드 연산자, concat, filter, slice, map)

 

 

 목차

1. 배열의 종류
   1. 스프레드 연산자
   2. concat
   3. filter
   4. slice
   5. map
2. 종류별 예시

 

1. 배열의 종류

1. 스프레드 연산자
   • '...' 을 통해 깊은 복사를 하게 되면, 기존 데이터를 건드리지 않고 새로운 데이터를 갖게 된다
   • 얕은 복사를 하게 되면, 데이터 수정시 기존 데이터도 함께 수정된다
   • 데이터를 추가할 때 사용된다
2. concat
   • 데이터를 추가할 때 사용
3. filter
   • 데이터를 삭제할 때 사용
   • 연속된 배열의 데이터 중 특정 데이터만 제외시킨다
4. slice
   • 데이터를 잘라낼 때 사용
   • 연속된 배열의 데이터 사이에 새로운 데이터를 추가할 수 있다
5. map
   • 데이터를 반복할 때 사용
   • 리턴 값 연산 가능

 

** 깊은 복사와 얕은 복사를 구분하는 이유 : 
부모 함수가 수정이 될 때, 자식 함수에 수정사항이 없어도 무조건 모두 다 랜더링이 실행된다.

이는 속도, 메모리, 관리적 측면에서 디메리트이기 때문에 conponent를 사용하여 부모함수와 자식함수로 분리함으로써 수정된 부분만 랜더링을 시킨다.

 

** push와 concat의 차이 : 
push는 부모 변수의 데이터와 복사한 데이터를 모두 바꾸지만, concat은 부모 변수의 데이터는 유지한 채 복사한 데이터만 바꾼다.

 

** map을 사용하는 이유 : 

JSX문법에선 for문과 forEach문은 사용할 수 없다

 

 

 

 

2. 종류별 예시

1. 스프레드 연산자 (= 깊은 복사)

• '...' 을 통해 깊은 복사를 하게 되면, 기존 데이터를 건드리지 않고 새로운 데이터를 갖게 된다
• 얕은 복사를 하게 되면, 데이터 수정시 기존 데이터도 함께 수정된다

1. 깊은 복사 (= 스프레드 연산자)

1-1) 결과 화면

2. 얕은 복사

2-1) 결과 화면

 

 

2. concat

• 데이터 추가할 때 사용
• push를 하면 기존 값이 바뀌게 된다

1. concat

1-1) 결과 화면

 

2. push

2-1) 결과 화면

 

3. 스프레드 연산자 응용

3-1) 결과 화면

 

 

3. filter

• 데이터를 걸러낼 때(= 삭제) 사용
• true인 값만 리턴 (fasle인 값은 리턴하지 않음)

n에 a3의 배열에 있는 값을 하나씩 대입한다

결과 화면

 

 

 

4. slice

• 데이터를 잘라낼 때 사용
• 배열 내의 연속된 데이터 사이에 새로운 데이터를 넣을 때 사용

결과 화면

 

5. map

• 데이터를 반복할 때 사용
• 리턴 값 연산 가능

** JSX문법에선 for문과 forEach문은 사용할 수 없다

결과 화면