반복문의 처리

for문은 실무에서 잘 사용하지 않는다.
for문 대신에 map 을 더 자주 사용한다
간단하고, 유지보수가 좋음.
성능적으로는 for문이 더 좋지만 극적으로 빠르지는 않음.

map 사용 기초

Map?

const classmates = ["철수", "영희", "훈이"]
// for문 사용
for(let child of classmates){
  console.log(child + "어린이")
}
// map 사용
classmates.map((el) => (el + "어린이"));

const classmates = [
  { name : "철수" },
  { name : "영희" },
  { name : "훈이" }
]

for(let child of classmates){
  console.log(child.name + "어린이")
}
// map 사용
classmates.map((el) => ({ name : el.name + "어린이"}));   

소괄호 생략하기

const classmates = ["철수", "영희", "훈이"]
classmates.map((el) => el + "어린이");

화살표 함수이기 때문에 특별히 의미가 없으면 생략이 가능함

const classmates = [
  { name : "철수" },
  { name : "영희" },
  { name : "훈이" }
]
classmates.map((el) => { name : el.name + "어린이"});  

이건 생략 불가능함

객체의 중괄호가 아닌 화살표 함수의 중괄호가 되어버림.

맵 안에서 html 태그 사용하기

const classmates = ["철수", "영희", "훈이"]
const aaa = classmates.map((el) => <div>{el}</div>)

이렇게 생성하면

const aaa = <div>{철수}</div>, <div>{영희}</div>, <div>{훈이}</div>

이렇게 세개가 나오게됨.

응용하면 게시글 목록 형태를 만들 수 있음.

예제 만들어 보기

// 데이터를 외부나 백엔드에서 받아왔다는 가정 하에
const FRUITS = [
  { number: 1, title: "레드향"},
  { number: 2, title: "샤인머스켓"},
  { number: 3, title: "산청 딸기"},
  { number: 4, title: "한라봉"},
  { number: 5, title: "사과"},
  { number: 6, title: "애플 망고"},
  { number: 7, title: "딸기"},
  { number: 8, title: "천혜향"},
  { number: 9, title: "과일선물세트"},
  { number: 10, title: "뀰"}
]
export default function MapFruitsPage() {
    const fruitsList = FRUITS.map (el => <div>{el.number} {el.title}</div>)
    return(
        <div>{fruitsList}</div>
    )
}

위처럼 굳이 나누지 않고

return(
  	<div>
  		{FRUITS.map (el => <div>{el.number} {el.title}</div>)}
	</div>
)

바로 직접 집어넣어서 만들 수 도 있음.