TIL2019/4/6

 const Dates = () => {
  const [date, setDate] = useState();
  const [day, setDay] = useState();
  const [dates, setDates] = useState();

  const getDateArr = () => {
    let arr = [];
    var weekday = new Array(7);
    weekday[0] = "일";
    weekday[1] = "월";
    weekday[2] = "화";
    weekday[3] = "수";
    weekday[4] = "목";
    weekday[5] = "금";
    weekday[6] = "토";
    for (let i = 0; i < 31; i++) {
      let d = new Date();
      d.setDate(d.getDate() - i);
      let date = d.getDate();
      let day = weekday[d.getDay()];
      arr.push({ day, date });
    }
    // console.log(arr);
    return arr;
  };
  useEffect(() => {
    setDate(new Date().getFullYear());
    setDay(new Date().getMonth());
    setDates(getDateArr());
  }, []);

  return (
    <>
      <div className="dateSection">
        <div className="head">날짜</div>
        <div className="year">{date}</div>
        <div className="month">{day}</div>
        <div className="dates">
          {dates && dates.map((item) => <DateItem item={item} />)}
        </div>
      </div>
    </>
  );
};

export default Dates;

위의 컴포넌트에서 dates의 기본값을 공백으로 처리하여 map이 동작하지 않았다 해결방법은 2가지였는데

&&와 같이 조건부 렌더링을 하거나 기본값을 빈배열로 해주는것이다.