[React] 쇼핑몰 프로젝트 (11) - 최근 본 상품 기능 2탄

 

로컬 스토리지를 이용한

최근 본 상품 기능 구현

2탄을 시작하겠다.

 

 

 

전 편에서

선수들의 상세페이지에 접속했을 때

로컬스토리지에 선수들의 이름을 저장하는 것 까지 완료했다.

 

이젠

메인메뉴로 돌아왔을 때

우측에 최근 본 상품 박스를 띄워보자.

 

<App.js>

 

import { useEffect, useState } from "react";

역시나 useEffect와 useState는 필수로 import해주고

 

function App() {
  let get_local = JSON.parse(localStorage.getItem("data"));

 

여기서도 get_local이라는 변수에

기존에 로컬에 저장되어있던

 

'data'의 키를 가진 값 (즉 선수들의 이름)을

할당해준다.

 

 

  useEffect(() => {
    get_local === null
      ? localStorage.setItem("data", JSON.stringify([]))
      : null;
  }, []);

 

useEffect() 함수 내에서

삼항연산자를 이용해

get_local이 null이라면(비어있다면)

localStorage.setItem으로 빈배열을 넣어주고

get_local이 비어있지 않다면 아무 행동도 안한다는 로직을 짠다.

 

  <div className="cart-box">
  <p style={{ marginTop: '10px'}}>최근 본 상품</p>

    {get_local !== null
      ? get_local.map((a, i) => {
          return (
            <div>
            <p className="get-local" style={{ marginTop: "10px" }}>{get_local[i]}</p>

            </div>
          );
        })
      : null}

  </div>

 

만약 get_local이 비어있지않다면

map함수를 이용해 get_local각각의 요소를

뿌려준다

 

 

 

다음과 같이 로컬에 배열이 비어있다면

최근 본 상품 박스에 

아무 이름도 없다.

 

하지만

 

 

상세페이지에 접속해

선수들의 이름을 로컬에 저장한 후 

다시 메인화면으로 돌아올 시 

우측 최근 본 상품에 선수들의 이름이 작성된다!

 

 

 

 

 

이상 끗!