TIL 2020/05/15

import React, { useEffect, useState } from "react";

const Dates = ({ dates }) => {
  const [datesDivision, setDatesDivison] = useState({
    0: [{ date: 20200501, isVailable: true }],
  });

  useEffect(() => {
    setDatesDivison(divideDates());
  }, [dates]);

  const divideDates = () => {
    let result = {
      0: [{ date: 20200501, isVailable: true }],
    };
    let num = Math.ceil(dates.length / 8); //function to seperate dates
    let count = 0;
    for (let i = 0; i < num; i++) {
      let item = [];
      for (let j = count; j < count + 8; j++) {
        if (dates[j] !== undefined) item.push(dates[j]);
      }
      count = count + 8;
      result[i] = item;
    }
    return result;
  };

  return (
    <div>
      <div className="col2">
        {datesDivision[0].map((item) => (
          <div>{item.date.toString().substring(6, 8)}</div>
        ))}
      </div>
    </div>
  );
};

// dates props
// [
// {date: 20200501, isVailable: true},
// {date: 20200502, isVailable: true},
// {date: 20200503, isVailable: true},
// {date: 20200504, isVailable: true},
// {date: 20200505, isVailable: true},
// {date: 20200506, isVailable: true},
// {date: 20200507, isVailable: true},
// {date: 20200508, isVailable: true},
// {date: 20200509, isVailable: true},
// {date: 20200510, isVailable: true},
// {date: 20200511, isVailable: true},
// {date: 20200512, isVailable: true},
//]

dates props를 여러단위로 나눠 렌더링하는중 divideDates 의 result를 {}로 설정했더니 초기 렌더링시 divideDates의 return값이 {}이 되어 map이 돌아가지 않았다.해결방법은
result의 초깃값을 렌더링가능값 값으로 바꿔주거나 datesDivision[0] &&datesDivision[0].map((item) => (과 같이 조건부 렌더링을 해줘야 한다