🚀 Start

이제 결제페이지를 생성해보려고 한다. 그러면 앞서 장바구니에서 체크한 상품데이터를 그대로 결제페이지로 가져와야한다.

✅ 따라서, recoil을 통해 상태관리를 해보도록 하자!

⭐️ Recoil

recoil의 상태관리가 필요한 곳은 체크된 상품이 결제예정 상품으로 출력되야하며, 결제페이지에도 출력되어야한다.

✔️ 결제예정창(Will Pay)

✅ 우선, handleCheckedChanged가 실행될 때 즉, 상품체크가 될때 해당 상품 데이터를 전달하자.

• checkedItems : reduce을 체크된 상품데이터를 누적 합산한 값

• useRecoilState : atom 혹은 selector의 값을 읽고 쓰려고 할 때 사용. 상태의 변경 사항을 다시 렌더링하기 위해 구성 요소를 구독. (참고)

• useEffect: items, formData의 변경에 따라 랜더링

• 정리 : 데이터들의 체크된 상태값 그대로 recoil Atom(상태 저장소?)에 전달.

// components/cart/indext.tsx
const CartList = ({ items }: { items: CartType[] }) => {
  const [checkedCartData, setCheckedCartData] = useRecoilState(checkedCartState);
  const [formData, setFormData] = useState<FormData>();


  ...
  
  useEffect(() => {
    const checkedItems = checkboxRefs.reduce<CartType[]>((res, ref, i) => {
      if (ref.current!.checked) res.push(items[i]);
      return res;
    }, []);
    setCheckedCartData(checkedItems);
  }, [items, formData]);

  ...
};

✅ Atom 객체 배열에 체크된 데이터 전달.

• Atom이 업데이트되면 해당 Atom을 구독하고 있던 모든 컴포넌트들이 새로운 값으로 리렌더링.
  또한, 여러 컴포넌트에서 같은 Atom을 구독하고 있으면 그 컴포넌트들이 상태를 동일하게 공유한다.

// src/recoils/cart.ts
import { atom } from "recoil";
import { CartType } from "../graphql/cart";

export const checkedCartState = atom<CartType[]>({
  key: "cartState",
  default: [],
});

✅ 데이터 가져오기

• useRecoilValue(): Recoil 상태가 변경되는 경우 구성 요소를 구독하여 재랜더링되어 업데이트된 값을 가져온다.

// components/willPay/indext.tsx
const WillPay = (...) => {
  const checkedItems = useRecoilValue(checkedCartState);
	...

  return (
    <div className="cart-willpay">
      <ul>
        {checkedItems.map(({ imageUrl, price, title, amount, id }) => (
          <li key={id}>
            <ItemData imageUrl={imageUrl} price={price} title={title} />
            <p>수량: {amount}</p>
            <p>금액: {price * amount}</p>
          </li>
        ))}
      </ul>
  	...
    </div>
  );
};

✅ 결제예정 창 출력

// components/cart/index.tsx
const CartList = ({ items }: { items: CartType[] }) => {
    const navigate = useNavigate();
    const [checkedCartData, setCheckedCartData] = useRecoilState(checkedCartState);
  		...
    const handleSubmit = () => {
      if (checkedCartData.length) navigate("/payment");
      else alert("결제할 대상이 없어요");
    };
  
  return (
  	...
    <WillPay submitTitle="결제창으로" handleSubmit={handleSubmit} />

  )
  
}

// components/willPay/indext.tsx
const WillPay = ({
  submitTitle,
  handleSubmit,
}: {
  submitTitle: string;
  handleSubmit: (e: SyntheticEvent) => void;
}) => {

	...
    return (
    ...
    <button onClick={handleSubmit}>{submitTitle}</button
    )

}
 

✅ 결제창 출력 정상작동 확인

⛔️ 체크박스 상태값 기억하기 + 리팩터링

체크된 상품에 대하여 데이터가 잘 전달되는 것을 확인했다. 하지만 결제페이지로 이동 후 다시 장바구니 페이지로 이동할 경우 체크가 풀려 체크했던 데이터가 날라가버린다.

✅ 따라서, 장바구니페이지가 랜더링될 때 장바구니의 상품 중에 체크되었던 상품의 id와 같은 데이터를 찾아서 check값이 true가 되게 만든다.

• data-*: data-* 전역 속성은 사용자 지정 데이터 속성이라는 속성 클래스를 형성하며, 이를 통해 스크립트를 통해 HTML과 해당 DOM 표현 간에 독점 정보를 교환 가능.

• dataset: HTMLElement 인터페이스의 읽기 전용 속성인 dataset은 요소의 사용자 정의 데이터 속성(data-*)에 대한 읽기/쓰기 액세스를 제공한다. 각 data-* 속성에 대한 항목이 있는 문자열 맵(DOMStringMap)을 노출.

// comonents/cart/CartItem.tsx
<input ... data-id={id} ... />


// components/cart/index.tsx
useEffect(() => {
    checkedCartData.forEach((item) => {
      const itemRef = checkboxRefs.find(
        (ref) => ref.current!.dataset.id === item.id
      );
      if (itemRef) itemRef.current!.checked = true;
    });
    setAllCheckedFromItems();
  }, []);

✅ setAllCheckedFromItems는 개별적으로 상품을 체크했을 경우 동작하는 함수

• 개별적으로 체크하여 전체선택까지 이루어지는 동작과 중복되는 로직이므로 별도의 함수로 만들어주었다

  const setAllCheckedFromItems = () => {
    // 개별아이템 선택시
    if (!formRef.current) return;
    const data = new FormData(formRef.current);
    const selectedCount = data.getAll("select-item").length;
    const allChecked = selectedCount === items.length;
    formRef.current.querySelector<HTMLInputElement>(".select-all")!.checked =
      allChecked;
  };

✅ 반대로 전체선택을 클릭하여 모든 체크박스가 체크되는 경우를 setItemsCheckedFromAll 함수로.

 const setItemsCheckedFromAll = (targetInput: HTMLInputElement) => {
    const allChecked = targetInput.checked;
    checkboxRefs
      .filter((inputElem) => {
        return !inputElem.current!.disabled;
      })
      .forEach((inputElem) => {
        inputElem.current!.checked = allChecked;
      });
  };

✅ 따라서, 앞서 만든 handleCheckedboxChanged 함수는 다음과 같이 조금더 간단하게 작성

const handleCheckboxChanged = (e?: SyntheticEvent) => {
    if (!formRef.current) return;
    const targetInput = e?.target as HTMLInputElement;
    if (targetInput && targetInput.classList.contains("select-all")) {
      setItemsCheckedFromAll(targetInput);
    } else {
      setAllCheckedFromItems();
    }
    const data = new FormData(formRef.current);
    setFormData(data);
  };

✅ 장바구니 데이터 및 체크 유지 확인

✔️ 결제페이지

이제 결제페이지를 만들어보자. 결제페이지에서 특별히 동작하는 기능은 없고, 체크된 상품을 부러오고, 결제하기에 따라 데이터의 삭제 및 유지를 나타내야 한다.

✅ 체크된 상품 즉, 결제예정창에 출력된 데이터들을 가져오기

• Recoil로 인해 전역 상태 관리 되고 있는 체크된 상품데이터를 불러오는 컴포넌트였던 WillPay 컴포넌트를 그대로 불러오자.

// components/payment/index.tsx
const Payment = () => {
 ...

  return (
    <div>
      <WillPay submitTitle="결제하기" handleSubmit={showModal} />
      ...
    </div>
  );
};

✅ 결제하기 클릭시 모달창 출력하기

• WillPay 컴포넌트의 결제하기 클릭시 showModal이 실행되어 모달창이 출력.

// components/payment/index.tsx
const Payment = () => {
  const navigate = useNavigate();
  const [modalShow, setModalShow] = useState(false);
 	...

  const showModal = () => {
    setModalShow(true);
  };

  const proceed = () => {
   ...
  };

  const cancel = () => {
    setModalShow(false);
  };

  return (
    <div>
      <WillPay submitTitle="결제하기" handleSubmit={showModal} />
      <PaymentModal show={modalShow} proceed={proceed} cancel={cancel} />
    </div>
  );
};

• React Portal을 이용하여 원하는 값을 모달창에 출력할 수 있다.(참고)
  • Portal: 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법

// index.html
...
<div id='modal'><div/> 
...

// components/payment/modal.tsx
const ModalPortal = ({ children }: { children: ReactNode }) => {
  return createPortal(children, document.getElementById("modal")!);
};

const PaymentModal = ({
  show,
  proceed,
  cancel,
}: {
  show: boolean;
  proceed: () => void;
  cancel: () => void;
}) => {
  return show ? (
    <ModalPortal>
    // show true,false에 따른 모달창 CSS 적용
      <div className={`modal ${show ? "show" : ""}`}>
        <div className="modal__inner">
          <p>정말 결제할까요?</p>
          <div>
            <button onClick={proceed}>예</button>
            <button onClick={cancel}>아니오</button>
          </div>
        </div>
      </div>
    </ModalPortal>
  ) : null;
};

✅ 결제하기에 따른 데이터 유지 및 삭제 구현

만약 결제하기를 클릭하면 체크된 상품은 장바구니에서 삭제하고, 장바구니에는 체크되지않았던 상품데이터들이 남아있어야한다.

1️⃣ Modal창의 예를 클릭할 경우 proceed가 실행된다.

• executePay(ids,... ): check되었던 상품 데이터 id값들을 인자로 전달.
• onSucess: 함수 정상 실행 후 동작.
  • setCheckedCartData([]) : 체크상태 초기화
  • alert: 결제 정상적으로 완료되었다는 알림
  • navigate: 상품목록페이지로 이동, replace true로 하여 이전페이지로 이동을 제한

// components/payment/index.tsx
type PaymentInfos = string[];

const Payment = () => {
  const navigate = useNavigate();
  const [checkedCartData, setCheckedCartData] = useRecoilState(checkedCartState);
 	...
  const { mutate: executePay } = useMutation((ids: PaymentInfos) =>
    graphqlFetcher(EXECUTE_PAY, ids)
  );

  ...

  const proceed = () => { // 1️⃣ 번
    const ids = checkedCartData.map(({ id }) => id);
    executePay(ids, {
      onSuccess: () => {
        setCheckedCartData([]);
        alert("결제 완료되었습니다.");
        navigate("/products", { replace: true });
      },
    });
  };

  ...


};

2️⃣ 체크된 상태의 데이터들은 cartData(장바구니 데이터)에서 삭제

// src/mocks/handlers.ts
export const handlers = [
	...
  graphql.mutation(EXECUTE_PAY, ({ variables: ids }, res, ctx) => { // 2️⃣ 번
    ids.forEach((id: string) => {
      delete cartData[id];
    });
    return res(ctx.data(ids));
  }),
];

// src/graphql/payment.ts
import { gql } from "graphql-tag";

export const EXECUTE_PAY = gql`
  mutation EXECUTE_PAY($ids: [ID!]) {
    payInfo(info: $info)
  }
`;

✅ 선택 상품 결제 후 삭제 및 미선택 상품 장바구니에 유지되는 것을 확인