[2023.02.21]
오늘은 react에서의 table에러에 대해 작성해보겠습니다!
📌 1. react에서의 table에러
문제 상황
table을 사용한 곳에서 다음과 같은 에러가 발생했습니다.
해결
Table은 하위구조로 thead, tbody, tr, td, th 등이 있습니다.
HTML에서의 table은 tbody를 생략하고 tr,td를 바로 사용할 수 있는 반면,
JSX에서의 table은 반드시 tbody를 선언해야 tr,td를 사용할 수 있다고 합니다!
마찬가지로 thead를 작성해야 th를 사용할 수 있습니다!
따라서 위와 같은 warning이 발생한 것인데요, 그럼 이렇게 작성해야하는 이유는 무엇일까요?
제가 검색을 통해 이해한 바로는 다음과 같습니다.
브라우저에서는 <tbody>태그가 필요합니다. 코드에 없으면 브라우저가 자동으로 태그를 삽입하는데요,
처음 렌더링할 때에는 잘 작동하지만, 리렌더링이 될 때 에러가능성이 생기게 됩니다.
Virtual DOM과 DOM를 비교하며 달라진 부분만 rendering해야하는데, DOM에는 태그가 있지만, 리액트의 Virtual DOM에는 태그가 없는 것이죠.
따라서 이로 인해 버그가 발생할 수 있으므로 thead, tbody 태그를 미리 넣어 선언해주어야 합니다.
📌 2. 오늘의 느낀점
오늘은 상세 페이지에 실제로 API통신을 해보았는데요. json-server를 통해 미리 구현해놓아서인지 비교적 수월하게 진행했습니다. 또, 코치님께서 코드리뷰를 통해 Suspense를 사용해보면 좋을 것 같다고 조언을 해주셔서 사용하고자 했는데요, 여러 내용을 읽고 적용을 해보았는데도 제대로 동작하지 않았습니다ㅠㅠ 이 부분은 해결이 되면 작성할 예정입니다! 마지막으로 오늘 주문하기 페이지 API통신을 해보려고 했는데, 백엔드에서 필수 항목을 몇 개 안넣어주셔서 해당 부분을 수정 요청했습니다! 이렇게 API통신을 하며 백엔드 담당 팀원 분과 의사소통을 하니 정말 협업을 하는게 실감이 났고 재미있었습니다 ㅎㅎ
