react) map함수 내부에서 더하기
본문
안녕하세요.
react에서 node.js를 이용하여 mssql과 연동 한 후, 데이터를 SELECT해서 Table에 보여지게 하고 있습니다.
이때, 보여진 데이터 중에 특정 한 값을 계속해서 더해주고 싶은데, 잘 되지 않아서 질문드립니다.
const [date, setDate] = useState(0.0);
return (
<Table responsive hover>
<thead>
<tr>
<th width="10%"></th>
<th width="20%">종류</th>
<th width="10%">사용일</th>
<th width="50%">사유</th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
{history.map((item) => {
return (
<tr key={item.id}>
<td>{item.rownum}</td>
<td>{item.TypeName}</td>
<td>{item.cnt} 일</td>
<td>{item.Reason}</td>
{/* 이 부분입니다 */}
{ () => setDate(date + `${item.cnt}`)}
<td>{date}</td>
</tr>
);
})}
</tbody>
</Table >
)
대략 위와 같이 작성되어있으며, db에서 잘 읽어오기에 데이터의 문제는 없습니다.
item.cnt 의 값을 setDate를 이용하여 계속해서 더해준 후에, 나중가서 다른 곳에 {date} 만 출력해주고 싶은데
현재는 계속 0 의 값만 나오게 됩니다.
참고로, 기존에는 setDate(date + `${item.cnt}`) 만 작성했으나, Too many re-renders 오류가 생겨서 구글링을 통해 () => setDate(date + `${item.cnt}`) 로 수정했습니다!
방법 알려주시면 감사드립니다.
답변 1
date스테이트 초기값이 왜 0.0인건가요? item.cnt와 합쳐서 일자 계산을 하시려는거 아닌가요/
네 맞습니다.
다만, 일자에 0.5, 1 이런식으로 들어가있어서 0.0으로 해봤습니다.
처음에 0으로도 해봤는데 별 차이는 없었습니다.
그럼 저 date가 기준이 되는 일이 있나요? 없다면 '' 빈값으로 두셨다가.. 해당페이지 렌더시에 오늘날짜를 useEffect로 넣으시고 dayjs를 이용해서 날짜 계산을 하셔야할거같은데요..0.0과 계산이 잘 안되는 이유는 진법문제때문이라 예상되네요
기준일은 따로 없고, date가 0부터 시작해서 {item.cnt}에 존재하는 숫자들만 계속해서 더해주고자 했습니다
말씀하신대로 useState를 쓰기보다 useEffect를 사용해야 할 것 같습니다.
덕분에 더 배워갑니다
바쁜시간에 도와주셔서 감사합니다!
아.. 그냥 단순 일수만 넣을꺼면 굳이 스테이트를 사용하실 필요는 없어보이는데요?
어차피 셋스테이트를 쓰게되면 맵핑 돌아갈때마다 계속 업데이트를 시킬테니깐.. 그냥 const 고정값을 두고 거기에 숫자를 더하시는게 나을거같네요
// 히스토리데이터가 대충 이런 모양일 경우..
history = [
{
id: 1,
cnt: 0
},
{
id: 2,
cnt: 1
},
{
id: 3,
cnt: 2
}
]
const Components = () => {
const date = 0;
return (
{
history.map(v => {
return (
<div key={v.id}>{Number(date) + Number(v.cnt)}</div>
)
})
}
)
}
아! 정말 바보같은 고민이었군요
감사합니다 덕분에 해결했습니다!!
아침부터 계속해서 도와주셔서 정말 감사드립니다!
