강의 중 질문드려요

[쟈니]

안녕하세요, 강의를 듣는 중 궁금한점이 몇가지 있는데요~!

https://codesandbox.io/s/patient-fast-6ovx84?file=/src/App.js

1. 저는 App.js에서 <Link>를 썼는데
<Link className="navLink" to={`/detail`}>Detail</Link>
이럴 경우 유저가 Nav의 Detail 탭을 누르면 빈 화면이 나오고 /detail/0으로 상품 id까지 url에 쳐야 나오는데 어떻게 수정해야하나요?

2. sort를 하면 배열 순서가 바뀌게 된다고 하셨는데, 저는 메인 화면에서 sort를 누르고 /detail/1 상품 id까지 url을 치면 바뀐 내용이 반영이 안되는데 정상인건가요?

3. Detail 컴포넌트 안에 아이템의 id로 이미지/내용을 찾을 수 있도록 find를 쓰셨는데, console.log를 하면 계속 undefined가 나와 반영이 안됩니다 
let findItem = props.shoes.find((shoe) => {shoe.id === itemId});
console.log(findItem) // undefined

4. '리액트에서 서버와 통신하려면 ajax 1' 응용에서 '더보기' 버튼을 누를때마다 아이템이 더 나오는걸 만드는데, 마지막 2개 상품 이미지만 계속 안나옵니다 ㅠ

+) 추가 질문
여기에 코드를 그냥 붙여 넣으면 보시기 힘들거 같아서 codeSandbox에 복붙을 했는데, 앞으로 질문할때 코드를 어떻게 올리면 좋을까요? 
(vsCode에서는 잘 나오는데 여기선 어떤 이유로 에러가 떠 화면에 안보이네요)



감사합니다 :)

<div id="mttContainer" class="bootstrapiso notranslate" style="transform: translate(411px, 320px);" title="" data-original-title=""> </div>

[codingapple]

{`/detail/0`} 합시다 
주소창에 뭐 입력하면 새로고침되어서 변수들이 리셋됩니다 
등호 2개로 바꿔봅시다 
마지막2개 이미지는 원래 없습니다 
코드는 대충 복붙합시다

[쟈니]

답변 감사합니다!

그런데 3번은 ==로 바꿔도 console에는 계속 undefined로 뜹니다,,

 
<div id="mttContainer" class="bootstrapiso notranslate" dir="ltr" style="transform: translate(901px, 88px);" title="" data-original-title="번역하지 않음"> </div>

[codingapple]

shoes.id 왼쪽에 return 추가해봅시다

[쟈니]

object 나왔습니다, 감사합니다! 
그런데 let findItem = props.shoes.find((shoe) => {shoe.id == itemId}) 
이 콜백 자체에 return이 포함된게 아닌가요? 왜 return을 안쓰면 undefined가 뜨는건가요?
 

[codingapple]

화살표함수는 return과 {}를 동시에 생략합니다

[쟈니]

계속 틀리게 쓸 뻔했네요, 감사합니다! :)

[글쓴이]

글