🛒 쇼핑몰 클론코딩을 하며 배운 것들 #3

세번째로 최근 본 상품 목록을 불러오는 기능을 구현했습니다.

최근 본 상품 목록을 구현할 api는 따로 주어지지 않아 저는 로컬스토리지에 정보를 저장하는 방법을 사용했습니다 ! 로컬스토리지를 이용해 데이터를 저장하는 방법은 처음이라 헤매는 부분이 많았는데요 .. 헷갈렸던 부분과 작업하며 배운 부분을 위주로 정리해보겠습니당

🔎 먼저, 로컬스토리지란 ?

웹의 데이터를 클라이언트에 저장할 수 있는 저장소입니다. 키와 값의 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회합니다. 로컬 스토리지의 데이터는 사용자가 의도적으로 지우지 않는 이상 브라우저에 계속해서 남아있으며 크롬 개발자 도구 Application 탭에서 로컬스토리지를 확인할 수 있습니다.

✍️ 로컬스토리지 사용 방법

localStorage.setItem(key, value) //데이터 추가
localStorage.getItem(key) //데이터 읽기

localStorage는 setItem() 함수를 사용해 데이터를 추가하고, getItem() 함수를 사용해 데이터를 읽습니다.

여기서 한 가지 주의할 것은 로컬스토리지는 문자만 저장할 수 있는 공간이라는 점입니다. 따라서 배열이나 객체를 저장하고 싶은 경우 JSON으로 변환해서 저장해야 합니다.

localStorage.setItem("obj", { name: "Haechan" });

만일 이렇게 억지로 로컬스토리지에 객체를 저장하려고 할 경우,

[object Object]로 자료가 깨지는 것을 확인할 수 있습니다.

localStorage.setItem(’obj’, JSON.stringify({name: ‘Haechan’})

따라서 array나 objct는 JSON.stringify를 통해 JSON 문자열로 변환해 저장해야 합니다.

짠 ! 로컬스토리지를 확인해보니 제가 원하는대로 객체 형태로 저장된 것을 확인할 수 있습니다.

그리고 이렇게 로컬스토리지에 저장된 정보를 불러오고 싶은 경우,

JSON.parse(localStorage.getItem(’obj’))

getItem() 함수와 JSON.parse()를 통해 데이터를 배열이나 객체로 변환하여 사용하면 됩니다.

📝 로컬스토리지를 어떻게 응용했는지?

최근 본 상품 기능을 구현하기 위해 로컬스토리지를 활용한 방법은 다음과 같았습니다.

1. 사용자가 제품 상세페이지에 접속할 경우
2. 해당 상품의 id를 가져와서
3. 로컬스토리지 watch에 추가합니다.

아래는 최근 본 상품 기능을 구현한 코드 일부입니다.

if(localStorage.watched === undefined) {
      localStorage.setItem('watched', JSON.stringify([]));
   }

    const watched = localStorage.getItem('watched');
    const watchedArr = JSON.parse(watched)
    watchedArr.unshift(id);
    localStorage.setItem('watched', JSON.stringify(watchedArr));
    
    const watchedSet = new Set(watchedArr);
    const watchedProducts = [...watchedSet].slice(0,8)
    localStorage.setItem('watched', JSON.stringify(watchedProducts)

먼저 setItem을 통해 로컬스토리지에 문자열로 빈배열을 추가하고,
watched 변수에 로컬스토리지에 저장된 정보를 담습니다. 이 정보를 활용하기 위해 watchedArr 변수에 JSON.parse()로 배열 형태로 가공한 watched 정보를 넣습니다.

최근에 본 제품을 맨 앞에 출력하기 위해 unshift()로 제품의 id를 추가하고, 중복된 상품은 한 번만 보여주기 위해 set 객체를 활용합니다. 마지막으로 set객체를 배열로 만들어 최대 8개의 상품 정보가 담길 수 있도록 slice로 배열을 수정했습니다.

import { getProductDetail } from '../total-product/fetch'

const [products, setProducts] = useState([]);
const watchedProducts = JSON.parse(localStorage.getItem('watched')) 

useEffect(() => {
    if(watchedProducts) {
      for(let products of watchedProducts){
        let details = getProductDetail(products)
        details.then((data) => {
          setProducts((curArr)=>[data, ...curArr])
        });
      }
    }
  }, []) 

다음으로 watchedProducts에 로컬스토리지에 있는 아이디 배열을 담고 상품 정보를 불러 그 정보를 products 변수에 할당해주었습니다.

details.then((data) => {
	setProducts([data, ...products])
});

처음에는 기존 배열에 새로운 상품을 추가하기 위해 useState의 set함수를 위와 같이 작성했습니다.

하지만 제가 원하는대로 값이 추가되지 않고 개별적인 배열이 이상한 모양으로 생성되었습니다.

details.then((data) => {
   setProducts((curArr)=>[data, ...curArr])
});

이를 해결하기 위해 화살표 함수에 기존 배열을 매개 변수로 넣어 값을 추가하는 방식을 사용했더니 문제가 해결되었습니다.

마지막으로 반복문을 돌릴 때 제품이 존재하지 않을 경우에 대한 예외 처리가 되지 않아 문제가 발생했습니다. if문을 통해 상품 데이터가 있을 때만 해당 반복문을 실행하도록 예외처리를 했더니

최근 본 상품 기능이 (일단은) 구현되었습니다 ..

🚨 문제 발생

그런데 제품이 랜덤한 순서로 추가되는 문제점이 발생했습니다 💢 가장 최근에 본 상품은 제일 상단에 오ㅏ야하는데 .. 이 순서가 지켜지지 않고 마구잡이로 제품이 출력되었습니다.

if (watchedProducts) {
      for (let product of watchedProducts) {
        let details = getProductDetail(product);
        details//
        .then((data) => {
          setProducts((curArr) => [data, ...curArr]);
        });
      }
    }

로컬스토리지에 저장되는 순서가 문제인걸까 ? 확인해봤으나 로컬스토리지에는 제가 의도한 순서대로 제품의 id값이 저장되고 있었습니다. 그럼 문제는 for문에 있다는건데 문제가 무엇인지 찾아보니 .. 바로 getProductDetail 함수였습니다!

getProductDetail 함수는 제품의 상세 정보를 불러오는 비동기 함수입니다. 그렇기 때문에 로컬스토리지에 저장된 순서와는 무관하게 제품 정보가 먼저 도달한 상품순으로 출력되는 것이었습니다 ..

    if(watchedProducts){
      Promise.all(watchedProducts.map(async product =>{
        return getProductDetail(product);
      })).then((data)=>{
        setProducts(data);
      }).catch((error) => console.log(error))
    }

문제를 해결하기 위해 Promise.all을 이용했습니다. Promise.all은 비동기적으로 병렬로 실행되지만, 마지막으로 완료된 함수까지 기다렸다가 값을 반환합니다.이때 값의 반환순서는 완료순서가 아니라 실행순서와 동일하기 때문에 Promise.all을 통해 상품을 의도한대로 출력할 수 있었습니다.

⚙️ recoil을 이용한 리팩토링

기존의 최근 본 상품 목록을 recoil 라이브러리를 활용해 리팩토링했습니다.

const viewedListState = atom({
  key: 'recentlyViewed',
  default: [],
  effects_UNSTABLE: [persistAtom],
});

전역에서 최근 본 상품 목록을 관리할 수 있도록 atom을 생성하고

const setViewedList = useSetRecoilState(viewedListState)

setViewedList((prevArr) => [
       {
         id: data.id,
         title: data.title,
         photo: data.photo,
       }, ...prevArr
     ])

useSetRecoilState 훅을 사용해 디테일 페이지에 접속했을 경우 상품의 id, title, photo를 저장합니다.

 //atom에 저장된 정보 불러와서
const viewedList = useRecoilValue(viewedListState)
  //중복된 상품 제거
 const products = viewedList.reduce((acc, current) => {
    const repeatedProduct = acc.find(product => product.id === current.id);
    if (!repeatedProduct) {
      return acc.concat([current]);
    } else {
      return acc;
    }
  }, []);
  //최종 보여질 상품
  const viewedProducts = products.slice(0, 3)

useRecoilValue을 사용해 최근 본 상품 목록 데이터를 읽어와서 중복된 상품을 제거한 뒤, 최종적으로 보여질 상품 3개만 남깁니다.

짜잔 최종적으로 완성된 최근 본 상품 목록의 모습입니다 !