최근본 상품기능 2 질문입니다

Detail.js에

import { useContext, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import styled from 'styled-components';
import {Nav} from 'react-bootstrap';

import {Context1} from './App.js';
import { useDispatch } from "react-redux";
import { addItem } from "./store.js";

let YellowBtn = styled.button`
    background: ${props => props.bg };
    color: ${props => props.bg == 'blue' ? 'white' : 'black'};
    padding:10px 
`

function Detail(props){
   
    let {재고} = useContext(Context1);

    let {id} = useParams();
    let 클릭한상품 = props.interior.find(x => x.id == id);
    let [alert, setAlert] = useState(true);
    let [탭, 탭변경] = useState(0);
    let dispatch= useDispatch();

    useEffect(()=>{
        let 꺼낸거 = localStorage.getItem('watched')
        꺼낸거 = JSON.parse(꺼낸거)
        꺼낸거.push(클릭한상품.id)
        localStorage.setItem('a', JSON.stringify(꺼낸거))
    },[])

    useEffect(()=>{
        setTimeout(()=> {
            setAlert(false)
        }, 2000)
    },[])
    
    
    return(
        <div className="container">
            {
                alert === true ?
                <div className="alert alert-warning"><span>2</span>초 이내 구매시 할인</div> :
                null
            }
            
            {/* <YellowBtn bg="blue">버튼</YellowBtn> */}
            <div className="row">
                <div className="col-md-6">
                
                </div>
                <div className="col-md-6">
                    <h4 className="pt-5">{클릭한상품.title}</h4>
                    <p>{클릭한상품.content}</p>
                    <p>{클릭한상품.price}</p>
                    <button className="btn btn-danger"
                        onClick={()=>{dispatch(addItem({id : 클릭한상품.id, name : 클릭한상품.title, count : 1}))
                    }} >주문하기</button>
                </div>
            </div>

            <Nav variant="tabs"  defaultActiveKey="link0">
                <Nav.Item>
                 <Nav.Link onClick={()=>{ 탭변경(0)}} eventKey="link0">버튼0</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                 <Nav.Link onClick={()=>{ 탭변경(1)}} eventKey="link1">버튼1</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                 <Nav.Link onClick={()=>{ 탭변경(2)}} eventKey="link2">버튼2</Nav.Link>
                </Nav.Item>
            </Nav>
            <TabContent 탭={탭} interior={props.interior}/>
        </div>
    )
}

function TabContent({탭, interior}){  //컴포넌트는 꼭 return과 같이써야함, props대신 {}쓸수있음
    // if( 탭 == 0 ){
    //     return <div>내용0</div>
    // } else if( 탭 == 1 ){
    //     return <div>내용1</div>
    // } else if( 탭 == 2 ){
    //     return <div>내용2</div>
    // }
    let [fade, setFade] = useState('');
    let {재고} = useContext(Context1);

    useEffect(()=>{
        setTimeout(()=>{ setFade('end')}, 100)
        return () => {
            setFade('')
        }
    }, [탭])
    return (
        <div className={'start ' + fade}>
            {
                [<div>{interior[0].title}{재고}</div>,<div>내용1</div>,<div>내용2</div>][탭]
            }
        </div>
    )
}

export default Detail;


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

굵게 표시한 부분이 질문하고 싶은 부분입니다!
선생님 저 부분에서 localstorage에 value값이 []가 뜹니다
클릭한상품.id 자체는 잘가져오는데ㅠㅠ 왜 ..
어디부분이 문제인지 찾지 못했습니다..ㅠㅠ