문제

{date.map((item) => {
            // 전년도일때
            if (item.year < today.year && item.day === 0) {
              return (
                <St.Sunday
                  key={item.date}
                  onClick={() => clickDayBtn(Number(item.date))}
                >
                  {item.date}
                  <CalendarEmo data={data} item={item} today={today} />
                </St.Sunday>
              );
            } else if (item.year < today.year) {
              return (
                <St.Day
                  key={item.date}
                  onClick={() => clickDayBtn(Number(item.date))}
                >
                  {item.date}
                  <CalendarEmo data={data} item={item} today={today} />
                </St.Day>
              );
            }
            // 올해 && 이전달일때
            else if (
              item.year === today.year &&
              item.month < today.month &&
              item.day === 0
            ) {
              return (
                <St.Sunday
                  key={item.date}
                  onClick={() => clickDayBtn(Number(item.date))}
                >
                  {item.date}
                  <CalendarEmo data={data} item={item} today={today} />
                </St.Sunday>
              );
            } else if (item.year === today.year && item.month < today.month) {
              return (
                <St.Day
                  key={item.date}
                  onClick={() => clickDayBtn(Number(item.date))}
                >
                  {item.date}
                  <CalendarEmo data={data} item={item} today={today} />
                </St.Day>
              );
            }
            // 이번달 오늘까지
            else if (
              item.year === today.year &&
              item.month === today.month &&
              Number(item.date) <= Number(today.date) &&
              item.day === 0
            ) {
              return (
                <St.Sunday
                  key={item.date}
                  onClick={() => clickDayBtn(Number(item.date))}
                >
                  {item.date}
                  <CalendarEmo data={data} item={item} today={today} />
                </St.Sunday>
              );
            } else if (
              item.year === today.year &&
              item.month === today.month &&
              Number(item.date) <= Number(today.date)
            ) {
              return (
                <St.Day
                  key={item.date}
                  onClick={() => clickDayBtn(Number(item.date))}
                >
                  {item.date}
                  <CalendarEmo data={data} item={item} today={today} />
                </St.Day>
              );
            } else if (item.day === 0) {
              return <St.Sunday key={item.date}>{item.date}</St.Sunday>;
            } else {
              return <St.Day key={item.date}>{item.date}</St.Day>;
            }
          })}

1. 문제 : 달력을 구현하는 로직이 너무 길고 조건문이 너무 많음. 중복되는 부분들이 많음.
2. 이유 : 아무 내용 없는 달력 하나만 구현하고자 했다면 저렇게까지 길어질 일이 없지만, 사용자의 데이터에 따라 글작성버튼과 이미 작성한 글을 각 날짜 칸 안에 아이콘으로 표현해줄 필요가 있었음. 또한, 글작성 버튼은 오늘 날짜 이후로는 나타나지 않게 처리해야함
   1. 위와 같이 표현하지 않을 시, 이전 년도의 오늘날짜와 같은 월,일 이후로는 글작성버튼이 나타나지 않음
   2. 또한 일요일은 빨간 글씨로 표현해줄 필요가 있었음
   3. 따라서 위와 같이 조건을 많이 주게 되었고, 일요일을 나타내는 스타일드 컴포넌트를 따로 만들어주었음

시도

	// 아이콘 버튼이 있는 부분
                <St.Day
                  key={item.date}
                  onClick={() => clickDayBtn(Number(item.date))}
                  day={item.day}
                >
                  {item.date}
                  <CalendarEmo data={data} item={item} today={today} />
                </St.Day>

	// 아이콘 버튼이 없는 부분
                <St.Day key={item.date} day={item.day}>
                  {item.date}
                </St.Day>

스타일드 컴포넌트에 day(요일)값을 props로 내려주어 0이면 빨강색, 6이면 파란색을 color로 설정하여 Day라는 스타일드 컴포넌트 하나만으로 요일별 글자 색 변경을 가능하게 함. ⇒ 기존에는 일요일만 표현했지만 토요일까지 표현할 수 있었음

그런데, 여기서 3번이나 반복되는 return값을 어떻게 줄일 수 있을지에 대해 고민하게 됨.

	// 반복되는 부분
								<St.Day
                  key={item.date}
                  onClick={() => clickDayBtn(Number(item.date))}
                  day={item.day}
                >
                  {item.date}
                  <CalendarEmo data={data} item={item} today={today} />
                </St.Day>

여러개의 조건문들(전년도일때, 올해 && 이전달일때, 이번달 오늘까지)을 하나의 조건문으로 처리해줄 수 있다면, return부분의 스타일드 컴포넌트를 한 번만 작성해도 될 것 같다는 생각이 들었음.

해결

{date.map((item) => {
            if (
              today.year < item.year ||
              (today.year === item.year && today.month < item.month) ||
              (today.year === item.year &&
                today.month === item.month &&
                Number(item.date) > Number(today.date))
            ) {
              return (
                <St.Day key={item.date} day={item.day}>
                  {item.date}
                </St.Day>
              );
            } else {
              return (
                <St.Day
                  key={item.date}
                  onClick={() => clickDayBtn(Number(item.date))}
                  day={item.day}
                >
                  {item.date}
                  <CalendarEmo data={data} item={item} today={today} />
                </St.Day>
              );
            }

오늘 이전의 날짜를 먼저 제해주는 것이 아닌, 오늘 이후의 날짜를 제해주고 그게 아닐 시에 글작성 버튼이 나타날 수 있도록 만들고자 함. 즉, 처음 코드의 예외처리 순서를 reverse 해보기로 함.

1. 첫번째 if문에서 조건들을 걸어줌. 세 가지를 모두 충족하면 날짜는 나타나되, 글작성 이모티콘 버튼은 나타나지 않도록 처리함.
   1. 올 해 보다 큰 년도 : today.year < item.year
   2. 올 해에서 이번 달 보다 큰 월 : today.year === item.year && today.month < item.month
   3. 이번달에서 오늘 이후의 날짜 : today.year === item.year && today.month === item.month && Number(item.date) > Number(today.date)
2. 동시에 충족해야 하는 부분들에는 && 를 걸어주고 세 가지를 합쳐주기 위해 || 사용함. 각각의 부분들을 구분하는 것을 명시하기 위해 소괄호로 묶어줌.

⭕️ 조건문이 다소 길어졌지만, 중복되는 부분들은 한 번만 써줘도 되게 되었음

⭕️ 한 개의 스타일드 컴포넌트로 요일별 스타일 차이를 줄 수 있게 되었음