JSX 중괄호({}) 안에서는 변수, 함수만 사용 가능하기 때문에 for문은 사용이 불가능하다!
map 함수를 통한 for문 구현
반복문(for문)을 대신해서 사용할 수 있는 함수가 내장 함수인 map 함수이다.
var arr=[1,2,3,4];
arr.map(function(num){
return num*2;
}
//arr의 값에 곱하기 2가 된 값이 반환된다.- 원본을 변형시키는 것이 아니라 새로운 값을 반환해준다.
- 배열 안 모든 값에 코드가 적용된다.
for문을 사용해야 하는 상황이라면?
중괄호 안에서 for문을 사용해야 한다면 함수 안에 for문을 작성해서 그 함수를 넣어주면 된다. (JSX 중괄호 내부에는 변수와 함수만 작성가능하기 때문)
map 함수 안에 조건문(if문)?
map 함수 대신 filter 함수를 사용하면 깔끔하다.
filter 함수는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
