[React로 만든 쇼핑몰]localstorage로 최근 본 상품 기능 만들기!!

DB 없이 state 데이터를 저장 하고 싶으면

• 서버로 보내서 DB에 저장
• 브라우저 임시 저장공간 사용 (localStrorage)

저는 localStorage를 사용해 데이터를 저장하여 최근 본 상품 UI를 만들어 볼것입니다

<Detail.js>

  let [watchItem, setWatch] = useState([]);

useEffect(() => {
    let watch = localStorage.getItem("watched");
    if (watch == null) {
      watch = [];
    } else {
      watch = JSON.parse(watch);
      watch.push(id);
    }
    if (watch.length >= 3) {
      watch = new Set(watch);
      watch = [...watch];
  
    }
    localStorage.setItem("watched", JSON.stringify(watch));
    setWatch(watch);
  }, []);

최근 본 상품의 인덱스를 저장해줄 state를 선언하고 useEffect()로 detail 컴포넌트가 렌더링 될때마다 안에있는 코드를 순서대로 실행하게 되는데 먼저 watched라는 key를 getItem해주면 wated의 value의 값이 출력이 되는데 그값이 없다면(null) 빈 배열을 하나 만들어주고 값이 있다면 JSON.parse()를 통해 오브젝트로 만들어준다.

let { id } = useParams( ); 현재 url에서 불러온 id가 저장되어 있으므로 push(id)로 추가해주고 중복을 처리하기 위해 set()자료 형을 사용해 주었다 

<app.js>

  let [watchItem, setWatch] = useState([]);


useEffect(() => {
    setWatch(JSON.parse(localStorage.getItem("watched")));
    console.log(watchItem);
  	}, []);
  
    return (
	<WatchItem>
        <p>최근 본 상품</p>
        {watchItem &&
          watchItem.map((item) => {
            if (watchItem.length > 3) {
              let copy = [...watchItem];
              copy.shift();
              setWatch(copy);
            } else {
              return (
                <div id="img" key={item}>
                  <Link to={"/detail/" + item}>
                    <img
                      src={
                        process.env.PUBLIC_URL + "img/clothes" + [item] + ".png"
                      }
                    />
                    )
                  </Link>
                </div>
              );
            }
          })}
      </WatchItem>

watchItem state에 map()함수를 사용해주고 if문에서는 state 배열길이가 3이 넘으면 shift를 사용해 먼저 저장된 값을 제거 해주었다. 그리고 UI를 만들어서 이미지를 로드하고 해당하는 이미지의 detail 페이지로 link도 걸어주었다 .

<AppCss.js>

import styled from "@emotion/styled";

const WatchItem = styled.div`
  display: flex;
  border-radius: 5px;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: 10;
  width: 10em;
  height: auto;
  background-color: beige;
  z-index: 2;
  #img {
    text-align: center;
  }
  p {
    margin-bottom: 10px;
    text-align: center;
    font-weight: bold;
  }
  img {
    width: 9em;
    height: 9em;
    margin-bottom: 10px;
  }
`;

export { WatchItem };

emotion 라이브러리를 사용해 UI 를 스타일링 해주었다

 

(결과)

방문한 사이트 순서로 최근본 상품이 잘 들어가있고 먼제 확인한 상품은 ui에서 보이지 않고 나중에 확인한 상품이 보여진다!!!

굿👍