Vanila Js로 SPA 만들기 - 리팩토링

링크 : https://hyunwoo12.tistory.com/3

기존 코드는 위에서 볼 수 있다.

위 링크의 리뷰한 사항을 바탕으로 리팩토링을 진행했다.

1,2) 라우팅 담당하는 부분을 기존 index.js 에서 router.js로 분리하기

router.js

function Router() {
    this.route = () => {
        // 기존과 동일
    }
    this.setUrl = (url) => {
        history.pushState(null, null, url);
        this.route();
    }

    window.addEventListener('popstate', this.route)
}

const router = new Router();
export { router };

Router 함수를 따로 만들어서 분리했다.

주소가 바뀔 때 렌더링과 뒤로가기, 앞으로가기 를 처리해주는 set url 메소드를 새로 추가했다.

라우터는 프로그램에서 한 개만 있으면 되기때문에 new와 함께 Router 함수를 호출해서 하나 만든 다음에 해당 객체를 export 했다.

3) utils.js의 api 통신 함수들 중복 없애기

url을 받아서 통신을 해주는 Request 함수를 하나 만들었다.

그 다음 걔를 활용해서

async function getProductList() {
    const result = await Request();
    return result;
}

이런 식으로 중복되는 부분을 줄여줬다.

4) 페이지 이동 함수 만들어서 사용하기

router.js의 setUrl 메소드를 만들어서 걔를 활용해서 페이지를 이동하게 했다. 자세한 설명은 1,2)에 있다.

5) 코드의 중복 없애고 가독성 높이기

기존 코드는 정말 알아보기가 힘들었다.

총 상품가격 ${priceWithComma(JSON.parse(localStorage.getItem("products_cart")).reduce((acc,product) => {
            return acc + ((getDetailById(product.productId).price + getDetailById(product.productId).productOptions.find(option => option.id===product.optionId).price)*product.quantity)
        },0))}원

그래서 얘를

총 상품가격 ${priceWithComma(products_cart.reduce((acc,product) => {
            const detail = getProductDetailById(product.productId)
            const optionDetail = detail.productOptions.find(option => option.id===product.optionId)
            return acc + ((detail.price + optionDetail.price)*product.quantity)
        },0))}원

이렇게 reduce에 콜백으로 준 함수에서 detail, optionDetail 변수를 만들어서 가독성을 높이고 중복을 줄였다. 정말 많이 깔끔해졌다.

추가로 ul 렌더링하는 부분도 정말 깔끔해졌다.

ul.innerHTML = `${products_cart.map((product) => {
        const detail = getProductDetailById(product.productId)
        const optionDetail = detail.productOptions.find(option => option.id===product.optionId)
        return `
        <li class="Cart__item">
            <img src=${detail.imageUrl}>
            <div class="Cart__itemDescription">
                <div>${detail.name}
                ${optionDetail.name}
                ${priceWithComma(detail.price + optionDetail.price)}원
                ${product.quantity}개 </div>
                <div>${priceWithComma((detail.price + optionDetail.price)*product.quantity)}원</div>
            </div>
        </li>`
    }).join(' ')}`

6,7) 컴포넌트들을 상태 변경에 따라 UI가 변경되는 구조로 바꾸기

지금 구조는 함수가 인자를 받으면 UI를 딱 리턴한다. 상태를 따로 관리하는 형태는 아니다. 얘를 그렇게 바꾸려니까 너무 많은 것을 바꿔야 했다. 그래서 여기서는 안하고 고양이 사진사이트 만들기 에서 해당 구조를 적용해서 만들었다.

기본 골자는 다음과 같다.

function hi() {
    this.state = {...}
    this.render = () => {
        // UI 만듬
    }
    this.setState = (nextState) => {
        this.state = nextState
        this.render()
    }
}

// 얘를 사용할 떄는 new와 함께 호출해서 쓴다
const a = new hi()
a.setState(nextState)
// 이러면 다시 렌더링된다