[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 React - map, filter, 단축평가

map() 함수

 - map()의 인자로 넘겨지는 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용

 - map() 함수를 필요에 따라 반복문처럼 사용할 수도 있음.

 

 arr.map(callbackFunction, [thisArg])

 - callbackFunction : 새로운 배열의 요소를 생성하는 함수로, currentValue, index, array 3개의 인수를 가질 수 있다.

 - [this.Arg]는 생략 가능한 것으로 callbackFuntion에서 사용할 this 객체

 - txt : list를 순서대로 돌면서 나오는 값

 - id : 방금 나온 값(txt)의 인덱스

 - arr : 현재 반복을 돌고 있는 배열

 - items : "return txt + id;"로 만들어진 배열

 

Component에 map() 적용

 

예시

 

 - map() 함수를 이용해 컴포넌트를 생성할 때 "key"사용을 권장한다.

 - React는 자율적으로 업데이트 전 기존 요소와 업데이트 요소를 비교하는데 key를 사용한다.

 

 - key를 index 값으로 설정할 시, 리스트의 순서가 변경되면 모든 key가 변경되므로 key는 index가 아닌 고유한 값으로 설정해야 한다. (지금 상황에서는 고유 값으로 설정할 만한 게 없으니, index로 테스트)

 

 

filter()

 

 - filter()의 인자로 넘겨지는 callback 함수의 테스트(조건)를 통과하는 요소를 모아 새로운 배열을 생성

 - filter() 함수를 사용하여 배열에서 원하는 값을 삭제하는 코드 구현 가능

 

예시

단축평가

 - 논리 연산자를 사용하여 특정 조건에 따라 값을 결정하건, 조건에 따라 특정 코드를 실행하는 방법

 1) &&연산자를 사용한 단축 평가 : 둘 다 참

 2) || 연산자를 사용한 단축 평가 : 둘 중 하나 참

 

1) &&연산자

2) || 연산자