저번주 금요일부터 하고 있었던 것은 모달을 눌렀을 때 모달창 안에서 분기별 버튼이 떠야 하는 것이었다.
물론 이것을 처음부터 내가 만들어야 하는 것은 아니고 당연히 위에 버튼은 다 있죠?
그래서 그냥 언제나처럼 복사-붙여넣기 하고 날짜 선택하는 로직짜고 다 잘 만들었는데! (물론 로직 짜는데 반나절 걸림^^)
그럼 이제 버튼 안에 이게 몇년도 몇분기인지 떠야겠죠!
하지만! 이것이 너무 어려웠답니다!
이미 있는 버튼들은 저번달 이번달 정도만 있어서 버튼의 시기가 조정되지는 않고 그나마 있는 것도 한 달 전이랑 두 달 전만 있었다.
근데 분기로 6개의 버튼을 만들게 되면 만약 지금이 2023년 1월이라면 이번 분기는 아직 다 지나지 않아서 자료를 가져올 수 없으니까 2022년 4분기부터 버튼이 만들어져야 하고 이 말인즉슨,
2021년 3분기
2021년 4분기
2022년 1분기
2022년 2분기
2022년 3분기
2022년 4분기
의 버튼이 있어야 한다.
이는 지금을 기준으로 했을 때 연도에서는 -3까지 차이가 나는 경우도 있기 때문에 나의 현재의 날짜에 따라 항상 바뀌는 거라서 아예 고정된 로직을 짜 놔야 하는 것이었다.
맨 처음에는 지금의 날짜를 가져와서 useState로 띄웠는데 이러니까 또 전에 있었던 수수료 문제처럼 비동기라 바로 안 바뀌고 두 번 눌러야 바껴서 이 방법은 맞지 않았다.
저번에는 이걸 useEffect를 통해서 해결했으니까 이번에도 로직을 이 안에 넣었더니 이건 dependency에 들어간 값이 바뀌면 계속 바뀌니까 버튼을 누를 때마다 분기버튼이 계속 바뀌는 것임!
근데 지금 생각해보니 dependency를 비워놓을 생각은 안 해봤네.
그러면 맨 처음에 마운트 되고 한 번에 끝나는데.
esLint를 엄격하게 해 놔서 안 될 것 같긴 한데 해 봐야겠다. -> 안 됐음...
쨌든 이래서 아, use 어쩌구는 답이 아니구나를 깨닫고 다시 생각을 했다.
아무래도 이건 handle 어쩌구의 함수를 만들어서 모달창이 클릭 될 때 그 날짜정보를 기준으로 셋팅이 되어야 할 것 같았다.
그래서 이번엔 모달창 밖으로 나가서 로직을 짜기 시작했는데 문제는 여기선 내려줄 버튼의 타입정의부터 해서 내려줘야 한다는 것이었다.
그리고 나는 아직 타입스크립트 바보라 이거…? 전혀…? 감이 안 옴…?
여기서 한참 하다가 더 망가뜨릴 것 같아서 일단 다시 초기화를 시킨 뒤 돌아왔다.
그래서 결국 찾아낸 방법은!
useState를 안 쓰고 그냥 변수선언을 해서 값을 계산해 할당한 다음 그 값이 영원히 변할 수 없게 놓으면 되는 거였음!
ㅎ ㅏ!
물론 이렇게 하니까 이런 개도라이 같은 코드를 6번씩이나 반복해야 하는데요…
아마 이것도 어떻게 간결하게 줄일 수 있을텐데 당장은 머리가 안 돌아가서 걍 냅두고 어제 퇴근했다…
이제 물어봐야지…
const quarterBtnStr = {
sixQuarterBtnStr: '',
fiveQuarterBtnStr: '',
fourQuarterBtnStr: '',
threeQuarterBtnStr: '',
twoQuarterBtnStr: '',
oneQuarterBtnStr: ''
};
// 이걸 여섯 번 반복한다... 실화냐...
const buttonSixYearStr = strSixQuarterStart.slice(0, 4);
const buttonSixQuarterStr = strSixQuarterStart.slice(5, 7);
if (buttonSixQuarterStr === '01' || buttonSixQuarterStr === '02' || buttonSixQuarterStr === '03') {
quarterBtnStr.sixQuarterBtnStr = `${buttonSixYearStr}년 1분기`;
} else if (buttonSixQuarterStr === '04' || buttonSixQuarterStr === '05' || buttonSixQuarterStr === '06') {
quarterBtnStr.sixQuarterBtnStr = `${buttonSixYearStr}년 2분기`;
} else if (buttonSixQuarterStr === '07' || buttonSixQuarterStr === '08' || buttonSixQuarterStr === '09') {
quarterBtnStr.sixQuarterBtnStr = `${buttonSixYearStr}년 3분기`;
} else if (buttonSixQuarterStr === '10' || buttonSixQuarterStr === '11' || buttonSixQuarterStr === '12') {
quarterBtnStr.sixQuarterBtnStr = `${buttonSixYearStr}년 4분기`;
}