배열 데이터를 호출후 배열 안의 객체를 수정하는 방법

JavaScript
1

데이터를 10개를 불러와서 map으로 해당 데이터들을 보여주고 있습니다.

상품명, 상품 가격, 판매 시작일(d-day) 이렇게 3개를 보여줄 때
상품명과 상품 가격같은 경우에는 따로 가공할 필요가 없어 그대로 호출해주면 되는데,

받아온 데이터중 판매 시작일 같은 경우
“start_date” : “2022-05-31T12:00:00.000Z” 이 형태로 들어와집니다.
그런데 저는 표시를 해당 일자가 미래인경우 오늘 날짜에서부터의 차이를
~~일 후 라고 표시를 해줘야하는데, 어떻게 진행해야할지 감이 안잡혀서 질문을 남깁니다.

–
데이터들을 하나씩 불러오는게 아니고, map으로 하기때문에 map의 요소로 받아온 것의 start_date라 따로 변수로 꺼내서 가공이 안되더라고요.

const data = [
    { id : 1, name : "사과", price: 1000, start_date : "2022-05-31T12:00:00.000Z" },
    { id : 2, name : "오렌지", price: 500, start_date : "2022-06-01T12:00:00.000Z" },
    { id : 3, name : "바나나", price: 3000, start_date : "2022-06-15T12:00:00.000Z" },
    { id : 4, name : "망고", price: 700, start_date : "2022-06-30T12:00:00.000Z" }
]

data.map((el) => (
    <div key={el.id}>
        <div>{el.name}</div>
        <div>{el.price} 원</div>
        <div>{el.start_date}</div>        // 이 부분에서 데이터 가공이 있어야합니다.
        // 목록 중 한 start_date가 현 날짜 기준으로 3일 뒤의 날짜라면 3일 뒤,
        // 현날짜 기준 이전 날짜라면 판매중, 이런식으로 표현을 해줘야햐는데 어떻게 해야 할지 모르겠습니다.
    </div>
))

이렇게 데이터를 map으로 뿌리다보니까 외부에서 저 start_date를 가공해서 가지고 오지 못하겠는데
마땅한 방법이 없을까요?

2

dayjs 라이브러리의 diff 를 쓰셔도 될 거 같고요. 혹은 현재날짜와 데이터의 날짜를 각각 timestamp 값으로 변환해 비교하는 계산식 함수를 짜시면 될거 같은데요~

4

아무래도 코딩실력이 미숙해서 npm 도움을 많이 받는데, 점점 무거워지는게 느껴지더라고요ㅎㅎㅠㅠㅠ 저것때문인지 비효율적이게 짠 코드 때문인지는 모르겠지만요…

의견 주신것 외에도 추가로 검색해서 얻은 해결방법은

const today = new Date();

`${Math.ceil((new Date(el.start_date).getTime() - today.getTime()) / (1000 
 * 60 * 60 * 24))}일 남음`

이렇게 해결했습니다!

여기서 코드 이해와 참고 했습니다