[TIL] 내일배움캠프 React 과정 2023.03.01

Today I Learned

• 아파트 매매 실거래가 데이터 예외 처리
• 아파트 매매 실거래가 데이터 필터링해서 표 만들기

 

---

table 태그로 표 만들기

API로 불러온 아파트 매매 실거래가 데이터를 필터링해서 표로 만들었다. table 태그는 처음 써보는 거였는데 생각보다 어렵지 않았다!

 

• <table>: 표를 생성하는 가장 상위 태그
• <th>: 표의 제목을 나타내는 태그
• <tr>: 행을 나타내는 태그
• <td>: 열을 나타내는 태그

이렇게 4개의 태그로 표를 만들 수 있다.

 

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.

그리고 콘솔에 워닝 메시지가 떠서 검색해 보니 리액트로 table를 사용할 때는 thead, tbody 두 개의 속성을 추가해줘야 한다.

 

<S.Table>
  <thead>
    <S.TableRow>
      <S.TableHead>계약일</S.TableHead>
      <S.TableHead>아파트명</S.TableHead>
      <S.TableHead>주소</S.TableHead>
      <S.TableHead>전용면적</S.TableHead>
      <S.TableHead>거래금액</S.TableHead>
    </S.TableRow>
  </thead>
  {dongList?.map((item: any, index: any) => (
    <tbody key={index}>
      <S.TableRow>
        <S.TableData>
          {item.년}-
          {item.월.toString().length === 1 ? `0${item.월}` : item.월}-
          {item.일.toString().length === 1 ? `0${item.일}` : item.일}
        </S.TableData>
        <S.TableData>
          {item.아파트} <span>({item.층}층)</span>
        </S.TableData>
        <S.TableData>
          {item.법정동} {item.도로명}
        </S.TableData>
        <S.TableData>{item.전용면적}㎡</S.TableData>
        <S.TableData>{item.거래금액}만원</S.TableData>
      </S.TableRow>
    </tbody>
  ))}
</S.Table>

참고용으로 올리는 최종 코드. 근데 스타일 컴포넌트 쓰고 map까지 돌려서 알아보기 힘들 듯 하다 ㅎㅎ

 

참고 링크

https://yooniron.tistory.com/10

https://all-dev-kang.tistory.com/entry/리액트-table에는-thead와-tbody가-필요해요feat-react-형님들

 

---

회고

휴일에도 나와서 열일하는 팀원들 너무 든든하다! 오늘은 기능 구현 외에도 문서화 작업을 좀 했다. 내일은 회원탈퇴 기능을 우선적으로 구현해 볼 생각이다. 근데 모달이 있어서 좀 귀찮은 작업이 될 거 같음 🥹