모달 초기화를 하는 기능을 하다가 메뉴별로 초기화를 다르게 해야해서 if문을 넣으려했는데
코드도 너무 길어지고 가독성이 떨어지는것같았다.
한 유투버가 if문을 깔끔하게 하는방법을 알려줬다. 매핑관계를 만들어서 분리시키는 방법이었다.
덕분에 코드가 훨씬 가독성이 좋아진것같다. 성능은 약간은 떨어질수 있다는데 왜그런지는 모르겠지만 한눈에보여서 기분좋아짐.
리액트 state로 setFileList를 사용하고있어서
함수를 호출하는것이아닌 함수 자체를 할당하는방식으로 교체하였다.
const handleModalCancel = () => {
//모달 초기화
//수정전
// if (currentModal === 'Artwork') {
// setFileList([])
// }else if(currentModal === ''){
// ...
// }
//수정후
resetMapping[currentModal]?.()
setIsModalOpen(false)
}
const resetMapping = {
Artwork: () => setFileList([]),
}
https://www.youtube.com/watch?v=toUlXhTZZ8w&t=238s
반응형
'Frontend > 모던자바스크립트' 카테고리의 다른 글
이벤트 객체 모방하기 {target : e} (0) | 2023.08.25 |
---|---|
자바스크립트 스프레드 연산자 (0) | 2023.07.25 |
자바스크립트 클로져 예시 (0) | 2023.05.03 |
Javascript BigNumber 에러 1e+22 해결 (0) | 2023.04.19 |
구조분해할당과 Null 처리 (0) | 2023.01.31 |