커머스 프로젝트를 진행하면서 장바구니 기능을 개발하는 중 장바구니의 특정 상품만 체크해서 결제하는 기능을 넣게 되었다. 귀찮으니 그냥 전체 결제만 하게 해버릴까 하다가 보통 쇼핑몰들이 이런 방식을 사용하고 있어서 따라가기로 하였다.
결제 대상이 되는 상품의 정보를 장바구니 페이지, 결제 페이지에서 사용하게 되는데 전역상태 관리 라이브러리로 뭐 사용할 지 고민하다가 최근에 멘토님이 퍼널이라는 것을 알려주셔서 사용해보기로 하였다.
https://www.youtube.com/watch?v=NwLWX2RNVcw
토스에서 만들어준 영상을 보고 참고했는데 토스에서 가입할 때 사용자 정보를 페이지끼리 넘겨주는 거랑 내가 만들고 있는 프로젝트에서 상품 정보를 페이지끼리 넘겨주는 방식이 비슷한 것 같아서 (영상에서는 Funnel이 깔때기라고 했다.) 사용하기에 적당할 것 같았다. 그리고 토스에서 라이브러리도 만들어서 제공해주던데 그거까지 쓰기엔 너무 거창한 것 같고, 직접 해봐야 이해도 더 잘 될 것 같아서 패턴만 흉내내보기로 했다.
퍼널 파일 만들기
const [buyProduct, setBuyProduct] = useState<CartProduct>([]);
const [step, setStep] = useState<"장바구니" | "결제페이지">("장바구니");
return (
<>
{step == "장바구니" && <CartPage />}
{step == "결제페이지" && <PaymentPage />}
</>
)
}일단 이렇게 상품 정보랑 step을 통제해줄 Funnel 파일 하나 만들어주고 Funnel 파일에서 보여줄 페이지를 하위 컴포넌트로 가져왔다. 그리고 step의 상태별로 보여줄 페이지를 지정했다.
{step == "장바구니" && <CartPage
setBuyProducts={setBuyProducts}
onNext={() => { setStep("결제페이지") }}
/>}그런다음 장바구니 페이지에서는 구매할 상품의 정보를 업데이트할 수 있게 "setBuyProducts"를 넣어주고 결제페이지로 넘어갈 함수도 넣어줬다.
{step == "결제페이지" && <PaymentPage
buyProducts={buyProducts}
setBuyProducts={setBuyProducts}
onNext={() => { }}
onPrev={() => { setStep("장바구니") }}
/>}결제페이지에서는 구매할 상품 정보를 받아오고, 혹시 결제페이지에서 취소 할 수도 있어서 "setBuyProducts"를 넣어줬다. onPrev는 취소 버튼 눌렀을 때 다시 장바구니 페이지로 가도록 넣어줬다.
이렇게 하니까 별도로 전역상태관리 라이브러리를 설치할 필요 없이 두 개의 페이지에서 구매 상품 상태를 공유할 수 있게 됐다. 라이브러리를 설치하기엔 구매 상품 정보를 사용하는 곳이 두 페이지 밖에 없고, 과정이 연속적이다보니 퍼널을 사용하는게 적당했던 것 같다. 다만 사용자 정보 같은 것을 전역 상태로 관리하기엔 퍼널이 적절하지 않을 수 있겠다는 생각이 들었지만 이번에 한 것처럼 국지적으로 전역 상태를 관리할 필요가 있을 때 사용하면 좋겠다고 느꼈다.
