props로 전달한 데이터가 undefined가 되는 경우

[이아인]

App.js에서 Detail.js로 props를 전달하는데 props 자체가 자꾸 undefined가 되는 문제가 있습니다.

// App.js 파일내용
function App() {
  let [shoes, setShoes] = useState([]);

  useEffect(() => {
    axios
      .get("http://localhost:8080/shoes") 
      .then((res) => {
        setShoes(res.data);
       })
      .catch((e) => {
        console.log(e);
      });
    }, []);

  return (
(생략)
           <Routes>
             <Route path="/" element={<Main shoes={shoes} />} />
             <Route path="/detail/:id" element={<Detail shoes={shoes} />} />

// Detail.js파일 내용

이해가 가지 않는 것은, if (shoes.length === 0) { return;  } 이 부분이 없으면 props 내용이 비어있다는 겁니다.
리액트의 동작 과정 때문인 것 같은데 어째서 이렇게 되는지가 궁금합니다.
혹시 서버에서 데이터를 받아오는 것 때문에 딜레이가 발생해서인가 의문이 들어서 직접 
App.js에 변수로 기재해넣어도 똑같습니다. 저 구문이 없으면 props가 텅 빈채로 도달합니다. 
왜인지 그 이유가 궁금합니다.
그리고 어째서 props에 값이 없을 때 return하라고만 했는데 이 코드가 있으면 props가
제대로 전달되는지 이유도 궁금합니다.

[codingapple]

ajax완료 후 데이터를 shoes에 넣는거보다 html 보여주는게 더 빨라서 그럴 뿐입니다

[이아인]

강의를 좀 더 보다보니 이 내용이 나오네요. 궁금했는데 감사합니다! :)

[글쓴이]

글