최근 본 상품 기능 만들다가 궁금한 점

사과쌤 안녕하세요. 최근본 상품에서 (-)를 누르면 삭제해주는 기능을 어찌저찌 만들긴 했는데 왜 되는지 모르겠어요..

data.js------------------------------------------------------------------------------------------

let data = [
    {
        id: 0,
        title: 'White and Black',
        content: 'Born in France',
        price: 120000,
    },

    {
        id: 1,
        title: 'Red Knit',
        content: 'Born in Seoul',
        price: 110000,
    },

    {
        id: 2,
        title: 'Grey Yordan',
        content: 'Born in the States',
        price: 130000,
    },
];

export default data;

----------------------------------------------------------------------------------------------------

App.js----------------------------------------------------------------------------------------------

/* eslint-disable */
import logo from './logo.svg'
import './App.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import { Button, Navbar, Container, Nav } from 'react-bootstrap'
import { useEffect, Suspense, createContext, useState } from 'react'
import data from './data'
import Detail from './page/Detail'
import Cart from './page/Cart'
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom'
import axios from 'axios'
import {
  useQuery,
  QueryClient,
  QueryClientProvider,
  staleTime,
} from '@tanstack/react-query'

function App() {
  useEffect(() => {
    if (localStorage.getItem('watched') == null) {
      localStorage.setItem('watched', JSON.stringify([]))
    }
  }, [])

  useEffect(() => {
    if (localStorage.getItem('watched') != null) {
      setLoad(true)
    } else {
      setLoad(false)
    }
  }, [localStorage.getItem('watched')])
  let 꺼낸거 = JSON.parse(localStorage.getItem('watched'))
  console.log(꺼낸거)

  let [present, setPresent] = useState('')
  console.log(present)

  console.log(present)
  let [shoes, setShoes] = useState(data)
  let navigate = useNavigate()
  let [click, setClick] = useState(1)
  let [load, setLoad] = useState(false)

  let result = useQuery({
    queryKey: ['작명'],
    queryFn: () => {
      return axios
        .get('https://codingapple1.github.io/userdata.json')
        .then(a => {
          console.log('요청됨')
          return a.data
        })
    },
    staleTime: 2000,
  })

  return (
    <div className="App">
      <Navbar bg="dark" data-bs-theme="dark" className="">
        <Container>
          <Navbar.Brand
            href="#home"
            onClick={() => {
              navigate('/')
            }}
          >
            ShoeShop
          </Navbar.Brand>

          <Nav className="ms-auto">
            <Nav.Link
              onClick={() => {
                navigate('/')
              }}
            >
              Home
            </Nav.Link>

            <Nav.Link
              onClick={() => {
                navigate('/detail/0')
              }}
            >
              Detail
            </Nav.Link>
            <Nav.Link
              onClick={() => {
                navigate('/cart')
              }}
            >
              Cart
            </Nav.Link>
          </Nav>
          <Nav className="ms-auto" style={{ color: 'white' }}>
            {result.isLoading && '로딩중'}
            {result.error && '에러남'}
            {result.data && result.data.name}
          </Nav>
        </Container>
      </Navbar>

      <Routes>
        <Route
          path="/"
          element={
            <>
              <div className="main-bg"></div>
              <div className="container">
                <div className="row">
                  {shoes.map((a, i) => {
                    return <Card shoes={shoes[i]} i={i} key={i}></Card>
                  })}
                </div>
              </div>
              <button
                onClick={() => {
                  setClick(click + 1)
                  console.log(click)

                  if (click == 1) {
                    axios
                      .get('https://codingapple1.github.io/shop/data2.json')
                      .then(data => {
                        setLoad(true)
                        let copy = [...shoes, ...data.data]
                        setShoes(copy)

                        console.log(shoes)
                        setLoad(false)
                      })
                      .catch(() => {
                        console.log('실패')
                      })
                  } else if (click == 2) {
                    axios
                      .get('https://codingapple1.github.io/shop/data3.json')
                      .then(data => {
                        setLoad(true)

                        let copy = [...shoes, ...data.data]

                        setShoes(copy)

                        console.log(shoes)
                        setLoad(false)
                      })
                      .catch(() => {
                        console.log('실패')
                      })
                  } else if (click >= 3) {
                    alert('상품없긴해요')
                  }
                }}
              >
                버튼
              </button>

              <div className="contaier watched-bg">
                <h4 className="m-4">최근본 상품</h4>
                <div className="row" style={{ position: 'relative' }}>
                  {localStorage.getItem('watched') != null && load == true
                    ? 꺼낸거.map((a, i) => {
                        return (
                          <RecentGoods
                            present={present}
                            setPresent={setPresent}
                            i={i}
                            shoes={shoes[꺼낸거[i]]}
                            꺼낸거={꺼낸거}
                            key={i}
                          />
                        )
                      })
                    : null}
                </div>
              </div>
            </>
          }
        ></Route>
        <Route
          path="/detail/:id"
          element={
            <Suspense fallback={<div>로딩중이오</div>}>
              <Detail shoes={shoes} />
            </Suspense>
          }
        />

        <Route path="/cart" element={<Cart />} />

        <Route path="/about" element={<About />}>
          <Route path="member" element={<div>맴버임</div>}></Route>
          <Route path="location" element={<div>위치정보임</div>}></Route>
        </Route>
      </Routes>
    </div>
  )
}

function RecentGoods(props) {
  return (
    <div className="col-md-2 col-4">
      <img
        src={`https://codingapple1.github.io/shop/shoes${</strong></em>
<em><strong>          props.꺼낸거[props.i] + 1</strong></em>
<em><strong>        }.jpg`}
        width="80%"
      ></img>
      <button
        onClick={() => {
          props.꺼낸거.splice(props.i, 1)
          localStorage.setItem('watched', JSON.stringify(props.꺼낸거))
          props.setPresent(props.꺼낸거)
        }}
        className=""
        style={{
          position: 'absolute',
          marginLeft: '-25px',
          marginTop: '3px',
          padding: '0.1px 6px',
        }}
      >
        -
      </button>

      <h4>{props.shoes.title}</h4>
      <p>가격: {props.shoes.price}원</p>
    </div>
  )
}

function Card(props) {
  let navigate = useNavigate()
  return (
    <div className="col-md-4">
      <img
        onClick={() => {
          navigate(`detail/${props.shoes.id}`)
        }}
        src={`https://codingapple1.github.io/shop/shoes${props.i + 1}.jpg`}
        width="80%"
      ></img>
      <h4>{props.shoes.title}</h4>
      <p>가격: {props.shoes.price}원</p>
    </div>
  )
}

function Load(props) {
  return (
    <div>
      <h4>로딩중입니다</h4>
    </div>
  )
}

function Event() {
  return (
    <div>
      <h4>오늘의 이벤트</h4>
      <Outlet></Outlet>
    </div>
  )
}

function About() {
  return (
    <div>
      <h4>회사정보임</h4>
      <Outlet></Outlet>
    </div>
  )
}

export default App

----------------------------------------------------------------------------------------------------


궁금한코드 ---------------------------------------------------------------------------------------
RecentGoods 컴퍼넌트에서 이 부분이 궁금한데 
 props.setPresent(props.꺼낸거) <- 이 코드를 넣으면 없어지는데 이 코드를 빼면 
localstorage에서만 빠지고 페이지에서는 빠지지 않더라구요. 이유가 뭘까요..?



      <button
        onClick={() => {
          props.꺼낸거.splice(props.i, 1)
          localStorage.setItem('watched', JSON.stringify(props.꺼낸거))
          props.setPresent(props.꺼낸거)
        }}