[React] map (반복문, 반복문으로 Table 생성)

• 반복문으로 값 출력
  • map과 화살표 함수 사용 (반복문)
  • {배열명.map((변수) ⇒ {변수.키값} … } 형식
• 반복문으로 Table 생성
  • map 안의 tr 태그 안에 키값 (유니크한 값) 으로 주기

  • <Table striped bordered hover>
            <thead>
              <tr>
                <td>상품코드</td>
                <td>상품이름</td>
                <td>상품가격</td>
                <td>판매수량</td>
                <td>판매금액</td>
              </tr>
            </thead>
            <tbody>
              {products.map((p) => (
                <tr key={p.code}>
                  <td>{p.code}</td>
                  <td>{p.name}</td>
                  <td>{p.price}</td>
                  <td>{p.qnt}</td>
                  <td>{p.price * p.qnt}</td>
                </tr>
              ))}
            </tbody>
          </Table>