리액트 라우터 3 강의 질문 드립니다

[SEO]

8:05 부터 유저가 없는 상품코드의 번호를 url로 치고 들어왔을 때 오류가 나서 
이걸 if 문으로 처리해 상품정보가 없을 때는 '없다' 라는 텍스트를 출력하고 싶어
코드를 짜 보았습니다.

function Detail(props) {

    let {id} = useParams();
    let findMove = props.shoes.find((x)=>{
        return x.id == id;
    })
    let imge = parseInt(findMove.id) + 1;
    
    if (!findMove) {
        return(
            <div>
                없는데요
            </div>
        )
    }
    
    return(
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                < img src={'https://codingapple1.github.io/shop/shoes' +imge+'.jpg'} width="100%" />
                </div>
                <div className="col-md-6">
                <h4 className="pt-5">{findMove.title}</h4>
                <p>{findMove.content}</p>
                <p>{findMove.price}원</p>
                <button className="btn btn-danger">주문하기</button>
                </div>
            </div>
        </div>
    )   
}

이렇게 짜 보았지만 Cannot read properties of undefined (reading 'id') 이런 오류가 계속 났고
해결하다 못해 챗지티피 친구한테 물어봤는데 
toString 함수를 사용해서 배열 안에 있는 유효한 id 값을 문자열로 변환해서 포함된 아이디 값을 
찾으라 하더라구요.

기존   let findMove = props.shoes.find((x)=>{
        return x.id == id;
    }) 코드 역시 toString 을 사용해 문자열로 변환했습니다. 


밑은 지티피 친구가 짜준 코드입니다.

function Detail(props) {
    let { id } = useParams();
    const validIds = props.shoes.map((shoe) => shoe.id.toString()); // 유효한 ID 값들의 배열

    if (!validIds.includes(id)) {
        return (
            <div>
                아무것도 없어
            </div>
        );
    }

    let findMove = props.shoes.find((x) => {
        return x.id.toString() === id;
    });

    let img = parseInt(findMove.id) + 1; // 이미지 파일 이름을 올바르게 생성

    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    < img src={'https://codingapple1.github.io/shop/shoes' + img + '.jpg'} width="100%" alt="상품 이미지" />
                </div>
                <div className="col-md-6">
                    <h4 className="pt-5">{findMove.title}</h4>
                    <p>{findMove.content}</p>
                    <p>{findMove.price}원</p>
                    <button className="btn btn-danger">주문하기</button>
                </div>
            </div>
        </div>
    );
}

이걸 적용했더니 정말 잘 동작합니다.
이 친구가 3초만에 쇽쇽 코드를 뽑아내니 현타가 와버렸습니다.

아무튼 제가 궁금한 건 기존 코드로 조건식에 id >= props.shoes.length의 조건을 추가해 보기도 했지만
동작하지 않던게 왜 toString 함수를 사용했을 때는 
원하는 대로 동작이 되는지 그 동작 원리를 알고 싶습니다.

[codingapple]

useParams() 가 뱉어준건 아마도 문자라서 문자끼리 등호비교해야할듯요

[글쓴이]

글