map() 메소드 사용해서 동적으로 렌더링하기

jsx코드에 하나씩 추가하는 것이 아닌, 동적으로 렌더링해야 한다.

현재 코드를 보면

• Expenses

 <ExpenseItem
          title={props.items[0].title}
          amount={props.items[0].amount}
          date={props.items[0].date}
        />
        <ExpenseItem
          title={props.items[1].title}
          amount={props.items[1].amount}
          date={props.items[1].date}
        />
        <ExpenseItem
          title={props.items[2].title}
          amount={props.items[2].amount}
          date={props.items[2].date}
        />
        <ExpenseItem
          title={props.items[3].title}
          amount={props.items[3].amount}
          date={props.items[3].date}
        />

이렇게 개별적으로 하나하나 추가하고 있는데,
이렇게 하는 건 지양해야한다.
이건 완전 하드코딩이잖아~~

그래서 map을 쓸 건데, map()은 다른 배열을 기반으로 새로운 배열을 생성한다.

• ex

const array1 = [1, 4, 9, 16];

// Pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

위는 mdn에 나와있는 예시이다.

위의 예시처럼 Expenses에도 ExpenseItem을 렌더링할 때 map()을 사용하는 걸로 변경해보겠다.
아래와 같다.

 {props.items.map((expense) => (
          <ExpenseItem
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
        ))}

• props로 전달하는 건 이미 완료되어있다. Expenses에서 이미 expenses 배열을 사용할 수 있고, 바로 쓰면 됨.

• expenses에 있는 모든 expense를 JSX요소인 ExpenseItem에 매핑함.

• 위에 써있는 expense는 자동적으로 함수를 매개변수로 전달함.