[리팩토링] if문 대신 매핑하기
본문 바로가기

Frontend/모던자바스크립트

[리팩토링] if문 대신 매핑하기

모달 초기화를 하는 기능을 하다가 메뉴별로 초기화를 다르게 해야해서 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 

 

반응형