일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- C
- 경제
- 지혜를가진흑곰
- 자바스크립트
- 다독
- 백준알고리즘
- 자바
- 독후감
- JavaScript
- 책을알려주는남자
- algorithmtraining
- 재테크
- 돈
- algorithmStudy
- 독서
- 알고리즘공부
- 프로그래머스 알고리즘 공부
- 주식
- 책알남
- 채권
- 서평
- 성분
- 알고리즘트레이닝
- 투자
- C++
- algorithmTest
- 프로그래밍언어
- Java
- 알고리즘 공부
- 화장품
Archives
- Today
- Total
탁월함은 어떻게 나오는가?
React에서 map함수를 사용해서 jsx 동적 테이블 그리기 본문
반응형
프로젝트를 진행하면서 리액트(REACT)에서 배열에 빈배열이 아닐경우에 동적으로 테이블을 그려주는 작업을 진행하고 싶었다.
하지만, 오랜만에 진행하려고 하니 헷갈려서 잃지않기 위해 적어놓기로 했다.
사람은 정말.. 망각의 동물인듯..
동적으로 그리기 위한 코드 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
{/* 보유 종목 */}
{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>
</>
)}
|
cs |
결과 :
반응형
'[Snow-ball]front > REACT 리액트' 카테고리의 다른 글
[React] Typescript event.taget.innerText 안될 경우에 해결 방법 (0) | 2023.04.25 |
---|---|
REACT(리액트) Virtual DOM이란 무엇인가? (0) | 2022.09.20 |
REACT(리액트) Function Component(함수 컴포넌트) VS Funtional Component(함수형 컴포넌트) - 차이점과 헷갈리는 이유 그리고 적절한 말은 무엇일까? (0) | 2022.07.21 |
[React] 리액트에서 쓸만한 차트 라이브러리 14종류 (0) | 2021.12.28 |
React - virtual DOM이란 (0) | 2021.07.07 |
Comments