[2023.02.15]
오늘은 상세 페이지 개발을 시작했습니다!
배웠던 내용임에도 불구하고 직접 구현하려고 하니 생각보다 어려웠고, 에러도 발생했습니다 ㅠㅠ
오늘은 개발하면서 겪은 에러와 느낀점에 대해 작성해보겠습니다!
📌 1. params 받아오기
에러 내용: Cannot read property 'params' of undefined
문제 상황
책의 id값을 받아 해당 책의 상세 정보를 보여주기 위해 react-router-dom에서 match를 이용해 id를 받아오려고 했지만 에러가 발생했습니다.
해결
react-router-dom V6부터는 element로 컴포넌트를 만들고, route props(match, history, location)을 받지 않는다고 합니다. 저는 이 에러를 useParams()를 이용하여 해결할 수 있었습니다!
📌 2. 데이터 받아오기
에러 내용: TypeError: Cannot read properties of undefined (reading 'imageURL')
문제 상황
저희 팀은 백엔드 담당자가 한 명이었습니다. 그로 인해 데이터 통신을 해야했지만 백엔드가 아직 구현이 되어 있지 않은 상황이었습니다. 백엔드가 완성될 때까지 마냥 기다리기 보다는 먼저 할 수 있는 일을 해놓고자 했습니다. 때문에 json-server를 이용해 가상 데이터를 만들고 먼저 개발을 시작해보았습니다.
json-server로 개발을 하던 중 axios를 통해 데이터를 받아오는 과정에서 에러가 발생했습니다.
아래의 사진과 같이 console.log를 통해 확인해보니 data값이 제대로 받아와지지 않은 것을 볼 수 있었습니다.
해결
제가 데이터를 받아온 후, 그 데이터를 useState로 관리하며 발생한 에러였습니다.
검색해보니 해당 에러의 원인은 useState가 비동기적으로 동작하기 때문이라고 합니다. 즉, 제가 해당 값을 사용하려고 할 때 state는 정의되지 않은 상태이기 때문에 undefined인 것이죠.
1. optional chaining을 이용한 해결
저는 처음에 이 에러를 optional chaning을 통해 해결할 수 있었습니다!
이렇게 하면 프로퍼티를 검사할 때 '?.' 앞의 요소가 null 또는 undefined라면 오류를 발생시키는 대신 이후의 검사를 멈추고 undefind를 반환합니다.
2. loading 처리를 이용한 해결
하지만 사용자 입장에서 생각했을 때, 데이터를 받아오는 동안 undefined가 나오는 것보다는 loading 화면이 나오는 것이 더 편리할 것 같다고 생각했습니다.
그 이유는, 보통 웹사이트에서 이러한 경우에 loading 화면이 나오는 것이 더 익숙하기도 하고, undefined값이 나오면 페이지가 제대로 받아와지고 있는 건지 잘 모를 것 같다고 생각했기 때문입니다.
따라서 useState를 이용해 loading의 상태 값을 관리하고 loading의 상태가 true일 때는 "Loading..." 이라는 글자가 나오도록 하고, false일 때 (데이터가 받아와졌을 때)는 원래의 페이지가 나오도록 구현하였습니다.
📌 3. 오늘의 느낀점
json-server에서 값을 받아오고 이 값을 활용하는 과정에서 에러가 발생해 많은 시간을 보냈습니다. 하지만, 이렇게 코드를 직접 작성해보고 에러에 대해 직접 찾아 해결하는 과정에서 더 많이 실력이 향상되는 것 같습니다 :)
<DesCriptionTr>부분도 처음에는 계속 반복되는 코드를 작성했는데, 조금 더 효율적으로 작성하고 싶어 코치님께 조언을 구했습니다. 코치님 덕분에 entries라는 메소드에 대해 알게 되었고, 이를 활용하여 더 깔끔한 코드 구현을 할 수 있었습니다.
이렇게 엘리스에서 프로젝트를 진행하며 현직자 코치님께 조언을 구할 수 있다는 점이 너무 좋은 것 같습니다. 저는 보통 혼자서 코드를 구현하고 에러를 해결한 후, 코치님께 해당 에러와 관련하여 제가 생각한 원인이 맞는지, 이런 방식으로 해결해도 괜찮은지 등의 조언을 구하는데요. 그러면 코치님께서 제 질문에 대한 답변과 함께 다양한 해결 방안을 가르쳐주십니다! 그 덕분에 더 많은 내용에 대해 배우고 생각해볼 수 있어서 정말 좋은 시간인 것 같습니다!
