[TIL] 01.11 결제 로직 수정

결제 폼에서 submit 버튼을 눌러서 폼을 제출을 하였을 경우 formik에서 isSubmitting 인자는 true로 바뀌게 되고 이 인자가 true가 되면 submit 동작이 일어나지 않도록 막아두도록 되어 있다. 
하지만 현재 결제폼 에서는 결제가 완료되자 않고 모듈이 꺼졌을 경우 다시 submit 동작이 가능하도록 만들어야 했다. 

import { useFormikContext } from 'formik'

const { setSubmitting } = useFormikContext;

위와 같이 useFormikContext 를 사용하여 setSubmitting 함수를 가져와서 결제가 실패하면 setSubmitting(false) 가 실행이 되도록 설정해 두었다. 그리고 결제가 실패를 하거나 에러가 나면 모달 창을 띄워서 알려 주도록 수정 하였다. 

 

오늘 컴포넌트 별로 함수를 차례대로 실행하는 부분에 대해서 어려움이 많았다.

<CheckoutForm>, <Payment>, <PaymentModule> 이렇게 3가지 컴포넌트에서 함수가 차례대로 실행이 되어야 하는데 Payment 함수가 먼저 실행이 되어 버리는 문제가 발생 하였다. 

 

<CheckoutForm> 에서 실행 되는 함수는 formik submit 시 실행이 되고 결제 정보를 store에 저장 한다. 

<Payment> 함수는 위 동작이 끝난 후 store에 저장된 값을 가져와서 주문서를 생성하는 api를 보내고 그 결과 값을 store에 저장한다. 

<PaymentModule> 의 함수는 iamport 모듈을 실행 시킨다. 

 

이 동작을 상태값으로 제어를 해보려고 했지만 이 방법은 코드가 지저분 해지고 관리해야 하는 상태값이 늘어나기에 별로 좋지않은 방법이라는 생각이 들어서 어떻게 해결할 수 있는지 계속 고민을 하였다. 

 

해당 컴포넌트들의 최상위에는 <Checkout> 컴포넌트가 존재하는데 <Payment> 컴포넌트에 있는 함수를 <Checkout>로 옮기고

<CheckoutForm> 에 props로 내려주어 submit 함수에 넣어주는 방식으로 구조를 변경을 해볼 생각이다.