렌더링 관련 질문입니다!

[안뇽]

현재 Lifecycle과 useEffect 2 챕터 듣고 있는데 주소창에(http://localhost:3000/detail/)   /detail/0 이런식으로 id번호를 입력해도 빈화면만 나와서 강의를 진행할 수 없습니다. 100프로 제가 코드를 잘못입력했을거라 생각해서 몇시간동안 코드를 훑어봤지만 뭐가 잘못된지 모르겠습니다.. 도와주세요 선생님 왜 빈화면이 나올까요..?
참고로 http://localhost:3000 주소에선 정상적으로 Home화면이 나옵니다.

App.js

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Navbar, Container, Nav } from 'react-bootstrap'
import { useState } from "react"
import data from './data.js'
import { Routes, Route, useNavigate} from 'react-router-dom'
import Detail from './Detail.js';
 

function App() {

let [shoes] = useState(data)
let navigate = useNavigate();

return (
<div className="App">

<Navbar className='Navbar'>
<Container>
<Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link onClick={() => { navigate('/') }}>Home</Nav.Link>
<Nav.Link onClick={() => { navigate('/detail') }}>Detail</Nav.Link>
</Nav>
</Container>
</Navbar>

<Routes>
<Route path='/' element={
<div>
<div className="main-bg"></div>
<div className="container">
<div className="row">
{ shoes.map((a, i) => {
return <Card shoes={shoes[i]} i={i}></Card>
 })}
</div>
</div>
</div>
}/>
<Route path="/detail/:id" element={<Detail shoes={shoes} />} />

</Routes>
</div>
 );
}

function Card(props) {
return(
<div className="col-md-4">
< img src={'https://codingapple1.github.io/shop/shoes' + (props.i+1) + '.jpg'} width="80%"/>
<h4>{ props.shoes.title }</h4>
<p>{ props.shoes.price }</p>
</div>
 )
}

export default App;

Detail.js

import { useEffect ,useState} from "react";
import { useParams } from "react-router-dom"

function Detail(props){
let [count, setCount] = useState(0)
let 
 = useState(true)
//유저가 :id 자리에 적은거 가져와줌
let {id} = useParams();
let 찾은상품 = props.shoes.find(x => x.id === id);

useEffect(() => {
setTimeout( () => { setAlert(false) }, 2000)

return () => {
 
 }
 },[])

 
return (
<div className="container">
{
alert === true
 ? <div className="alert alert-warning">
 2초이내 구매시 할인
</div>
 : null
}
<button onClick={() => { setCount(count+1) }}>버튼</button>
<div className="row">
<div className="col-md-6">
< img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
</div>
<div className="col-md-6">
<h4 className="pt-5">{ 찾은상품.title }</h4>
<p>{ 찾은상품.content }</p>
<p>{ 찾은상품.price }</p>
<button className="btn btn-danger">주문하기</button>
</div>
</div>
</div>
 )
}

export default Detail;

[codingapple]

크롬콘솔창에 뭐가뜨나 확인해봅시다
alert라는 변수명은 좋지않아서 다른걸로 바꿔봅시다

[안뇽]

답변 감사합니다! 일단 말씀해주신데로 alert 변수명은 다른걸로 바꿨고 크롬콘솔창에 뜬 에러들 다 읽어봤는데
<h4 className="pt-5">{ 찾은상품.title }</h4> 여기서 "Detail.js:36 Uncatched TypeError: 정의되지 않은 속성을 읽을 수 없습니다" 라고 에러가 떠서, 아무리 봐도 정의를 잘 한것 같은데 뭐가 문제이지 생각하다가
혹시나 해서 let 찾은상품 = props.shoes.find(x => x.id === id);  이코드의 비교연산자를  == 이걸로 바꿨는데 렌더링이 되었습니다..
== 연산자는 느슨한 비교이고 === 이 연산자는 엄격한 비교라고 알고 있는데 왜 여기서는 === 이걸 쓰면 안되나요?? 평소에 === 만 쓰는 편이라 궁금합니다..

[안뇽]

.

[codingapple]

x.id와 id 둘 중 하나가 숫자가 아니라 문자인가봅니다

[글쓴이]

글