[프로젝트 개발일지] OOTD - 장바구니 Select (선택 사항)

선택 사항을 만들어 보려고 한다.

 

 

위의 빨간색으로 체크된 부분 처럼

 

state로 값을 DB에서 가져오고 value로 담고 있다가

 

select의 options를 선택하면

 

값이 바뀌는 로직을 만들고 싶었다.

 

 

 

그러기 전에 값이 변경되면

 

배열안에 요소들이 값이 변경된 요소가 가장 뒤로 간다는 것도 알게되었다.

 

  const getCartData = () => {
    axios
      .get(`api/cart/view`, {
        headers: {
          "Content-Type": "application/json",
        },
        withCredentials: true,
      })
      .then((response) => {
        const sortedCartArray = response.data.data.sort((a: { createdAt: string | number | Date }, b: { createdAt: string | number | Date }) => (new Date(a.createdAt) as any) - (new Date(b.createdAt) as any));
        setCartArray(sortedCartArray);

        // 기웅이가 추가한 코드 (c_id로만 이루어진 배열생성)
        const car = response.data.data.map((item: { c_id: any }) => [item.c_id]).flat();
        setIsCartId(car)

        const newInitialCheckedItems: Record<number, boolean> = {};
        response.data.data.forEach((_: any, index: number) => {
          newInitialCheckedItems[index] = true;

        });
        setCheckedItems(newInitialCheckedItems);
      })
      .catch((error) => {
        console.error("API 호출 중 오류 발생:", error);
      });
  }

 

 

그래서 sortedCartArray로 createAt 즉, 생성된 순서대로 default로 나열되게끔 만들어줬고

 

값이 변경되면 순서가 변경되던 에러가 고쳐졌다.

 

그런데 여기서 내가 궁금한 부분은 여기다.

 

 

 

 

select 안의 option 값들을 변경할 때 마다 깜빡거리는 증상이 생겼다.

 

음.. 이거 어디서 많이 본건데...?

 

일단 useEffect의 문제로 의심하고 있기는 하다.

 

이 문제의 해결은 내일 이시간에 해결해서 돌아오겠다.

 

해결한 방법

 

2024.03.11 - [⭐ 𝐩𝐫𝐨𝐣𝐞𝐜𝐭𝐬/project 개발일지] - [프로젝트 개발일지] OOTD state 변경 시 깜빡임 문제 해결

[프로젝트 개발일지] OOTD state 변경 시 깜빡임 문제 해결