react) map함수 내부에서 더하기

react) map함수 내부에서 더하기

QA

react) map함수 내부에서 더하기

답변 1

본문

안녕하세요.

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와 합쳐서 일자 계산을 하시려는거 아닌가요/

그럼 저 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>
      )
    })
    }
  )
}

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #map ×
전체 14
© SIRSOFT
현재 페이지 제일 처음으로