Project : Closure를 이용해서 holiday를 처리해보자

위 공휴일 API에서 받아오는 데이터를

  # 1월1일은 dateName이 '1월 1일'로 나와있으므로 신정으로 바꿀 것
  #12월25일은 dateName이 기독탄신일로 나타내므로 성탄절로 바꿀 것
  #설날, 추석에서 첫 설날은 설연휴로 , 첫 추석은 추석연휴로, 두 번째는 설날, 두번째는 추석
  #3번째는 설 연휴, 추석 연휴

위와 같이 객체 배열을 다시 한번 더 가공해야 한다 .

위 데이터의 dateName을 바꿔야하는데 한번에 각 요소를 순회 하면서 바꿔주고 싶다.

객체 배열의 각 요소를 순회하는 메소드에서 map, foreach 가 있는데 나는 foreach를 선택하기로 하였다.

이유는 map을 돌리면서 데이터 가공하면 변수에 감싸주고 return 해야하는데

foreach는 순회만 하면서 데이터 변형만 하면 되기에 foreach를 사용하기로 결정했다.

1월 1일은 신정으로 바꾸고, '기독 탄신일' 은 '성탄절' 로 바꾸는 건 괜찮은데

foreach문을 돌면서 연속 '설날' 세 개와 '추석' 세 개중

2번 째 '설날' , '추석' 을 제외한 '설날' , '추석' 을 '설 연휴' , '추석 연휴' 로 바꾸고 싶다.

바꾸려고 할 때 어떻게 할까 했는데,, 떠오르는 것은 closure 개념을 활용 하여 바꿔주자는 생각이 강하게 떠오른다.

그래서 만들었다. 함수를

// Type
interface HolidayType {
  dateKind: string;
  dateName: string;
  isHoliday: string;
  locdate: number;
  seq: number;
}

// Closure로 만든 Formatted 함수
const isLunarHoliday = () => {
  let count = 0;

  function formattLunarHoliday(param: HolidayType, formattedName: { name: string; change: string }) {
    if (param.dateName === formattedName.name && count !== 1) {
      param.dateName = formattedName.change;
      if (count === 2) {
        count = 0;
        return param;
      }
      count++;
      return param;
    }
    if (param.dateName === formattedName.name && count === 1) {
      count++;
      return param;
    }

    return param;
  }
  return formattLunarHoliday;
};


// 실행하는 component - holiday는 staticProps
const Sales = ({ holiday }: { holiday: HolidayType[] }) {
  const test = holiday.forEach(a=>{
    isLunarHoliday()(a,lunarNewYear)
    isLunarHoliday()(a,lunarTanksGiving)
  })

  console.log(holiday)

//...(생략)
}

그런데 안 바뀐다....

왜...

해결

const isLunarHoliday = () => {
  let count = 0;
  
// ... 생략
};
// 실행하는 component - holiday는 staticProps
const Sales = ({ holiday }: { holiday: HolidayType[] }) {
  // 먼저 호출 
  const holidayProcessor = isLunarHoliday();
  
  // foreach문으로 돌리자
  const test2 = holiday.forEach(a => {
    isNewYearHoliday(a);
    holidayProcessor(a, lunarNewYear);
    holidayProcessor(a, lunarTanksGiving);
    isChristmas(a);
  });

  console.log(holiday)

//...(생략)
}