React에서 map함수를 사용해서 jsx 동적 테이블 그리기

프로젝트를 진행하면서 리액트(REACT)에서 배열에 빈배열이 아닐경우에 동적으로 테이블을 그려주는 작업을 진행하고 싶었다.

 

하지만, 오랜만에 진행하려고 하니 헷갈려서 잃지않기 위해 적어놓기로 했다.

사람은 정말.. 망각의 동물인듯..

 

 

동적으로 그리기 위한 코드 :

        {/* 보유 종목 */}
        {assetArr.length === 0 ? (
          ""
        ) : (
          <>
            <Table>
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>종목명</Table.HeaderCell>
                  <Table.HeaderCell>보유 수량</Table.HeaderCell>
                  <Table.HeaderCell>매수 가격</Table.HeaderCell>
                  <Table.HeaderCell>총 매수금액</Table.HeaderCell>
                  <Table.HeaderCell>비중</Table.HeaderCell>
                </Table.Row>
              </Table.Header>
 
              {assetRate.map((el) => {
                return (
                  <>
                    <Table.Body>
                      <Table.Row>
                        <Table.Cell>{el.stock}</Table.Cell>
                        <Table.Cell>{el.stock_holdings}</Table.Cell>
                        <Table.Cell>{el.buy_price}</Table.Cell>
                        <Table.Cell>
                          {el.buy_price * el.stock_holdings}
                        </Table.Cell>
                        <Table.Cell>
                          {`${Math.round(
                            ((el.buy_price * el.stock_holdings) /
                              totalAssetRate) *
                              100
                          )}%`}
                        </Table.Cell>
                      </Table.Row>
                    </Table.Body>
                  </>
                );
              })}
            </Table>
          </>
        )}

 

 

결과 :