1. map() 함수

map 함수란?

map 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리된 새로운 결과를 새로운 배열에 담아 반환하는 함수다.

1-1. map() 함수 기본 사용법

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map((num) => num *2);
console.log(result);

• numbers 배열 객체를 선언하고 [1,2,3,4,5] 로 초기화하였다.
• map() 함수를 통해 배열 요소의 각 값에다가 * 2 를 한 결과를 return 하고 있다.
• result 배열 객체에는 [2,4,6,8,10] 의 결과값을 가지는 배열객체가 반환되게 된다.

---

2. map() 을 통해 컴포넌트 반복하기

import React from 'react';

function App() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  const itemList = items.map((item) => {
    return <li>{item}</li>;
  });

  return (
    <div>
      <ul>{itemList}</ul>
    </div>
  );
}

export default App;

위 코드에서 items라는 배열을 만들고, map() 함수를 사용하여
각 항목에 대한 <li> 태그를 생성하여 itemList 배열에 저장했다.
그리고 itemList 배열을 <ul> 태그 안에 출력했다.

결과적으로는 다음과 같은 출력이 생성된다.

- Item 1
- Item 2
- Item 3

---

3. Props {...}

3-1. props 일일히 다 넣기

우리는 평소에 props를 일일히 다 넣는다.

<Human
  name="백서진"
  age={18}
  hobby="잠자기"
/>

하지만 이 방법은 문제가 있다.
만약 10개의 props를 넣어야 한다면?

<Human
  name="백서진"
  age={18}
  hobby="잠자기"
  schoolClass="2-2"
  teacher="장종선 선생님"
  jobPosition="반장"
  girlFriend="원설아"
  favorateSubject="국어"
  hateSubject="비공개"
  Course="공기업 취직"
/>

보다시피 코드가 굉장히 길어지게 된다.
그렇다면 어떻게 이런 문제를 해결할 수 있을까?

---

3-2. item = {item}으로 넘기기

const item = {
  name="백서진"
  age={18}
  hobby="잠자기"
  schoolClass="2-2"
  teacher="장종선 선생님"
  jobPosition="반장"
  girlFriend="원설아"
  favorateSubject="국어"
  hateSubject="비공개"
  Course="공기업 취직"
};

<Human item={item} />

위에 따로 item이라는 변수를 선언하여서 값을 저장한 다음, item={item}으로 넘기는 방법이 있다.

그런데 이렇게 하면 Human 컴포넌트의 코드를 아래처럼 변경해주어야 한다.

function Human(props) {
  return (
    <div>
      <h1>{props.item.name}</h1>
      <p>{props.item.age}</p>
    </div>
  );
}

하지만 이렇게 변경하지 않고도 쓰는 방법이 있다.

---

3-3. props를 {...item} 으로 넣기

const item = {
  name="백서진"
  age={18}
  hobby="잠자기"
  schoolClass="2-2"
  teacher="장종선 선생님"
  jobPosition="반장"
  girlFriend="원설아"
  favorateSubject="국어"
  hateSubject="비공개"
  Course="공기업 취직"
};

<Human {...item} />

...은 배열이나 객체의 요소를 분리할 때 사용된다.
...item으로 props를 넘기게 되면 item을 추가로 붙이지 않아도 된다.

function Human(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>{props.age}</p>
    </div>
  );
}