[React] Table 사용기

인턴 하게 되어 회사에서 프로젝트를 진행했습니다. 로그인, 회원가입 화면 구성 및 기능 구현하는 등 프로젝트의 일부분을 전담하면서 회사 일을 시작하게 되었습니다.

 

🤦‍♂️ 실무에서의 table 첫 대면, 오류 발생

그중에 일부 만들어진 기능을 현재 프로젝트로 옮겨야 하는 작업을 하게 되었습니다. 같은 React로 만들어진 기능이라 손쉽게 옮겨질 줄 알았는데 브라우저 콘솔창에 문제를 맞닥뜨리게 되었습니다.

콘솔창 table 오류

사실 바닐라 js에선 문제없던 부분이기도 했고 React도 js이기 때문에 문제가 없을 거라고 생각했지만 다음과 같은 오류를 보게 되었을 때는 의아했습니다.

 

🤔 해당 오류는 왜 발생하나?

해당 오류는 <tr> 태그나 <td> 태그가 <table> 태그 바로 밑에 오게 되면 생깁니다. 즉, React에서는 꼭 <tr>, <td> 태그가 <tbody>, <thead> 태그 내부에 있어야 한다는 겁니다.

사실 해당 오류가 발생해도 렌더링은 잘 되어 화면에 출력됩니다. 하지만 출력이 되는 것은 브라우저에서 누락된 <tbody>나 <thaed>를 자동으로 입력하여 만들어주기 때문에 출력된다는 겁니다.

리렌더링 할 때 DOM 전체를 전부 렌더링 할 때는 상관없지만 React는 Virtual DOM을 사용하여 리렌더링 할 부분을 찾아 렌더링 과정을 거칩니다. 이때 DOM과 Virtual DOM에 차이가 생깁니다. Virtual DOM에는 <tbody>나 <thead>가 없기 때문이죠. 그렇기 때문에 개발자가 해당 부분에 변경한 사항이 없다고 해도 DOM과 Virtual DOM에 차이가 있기 때문에 계속해서

리렌더링이 발생하게 되겠죠. 작동은 정상적으로 되겠지만 오류가 생길 가능성이 생기게 됩니다.

참고: https://all-dev-kang.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-table%EC%97%90%EB%8A%94-thead%EC%99%80-tbody%EA%B0%80-%ED%95%84%EC%9A%94%ED%95%B4%EC%9A%94feat-react-%ED%98%95%EB%8B%98%EB%93%A4

[리액트] table에는 thead와 tbody가 필요해요(feat. react 형님들)

 

👨‍💻 해결

table을 조금 더 자유자재로 사용해야 하는 프로젝트의 경우 불편감을 느낄만한 부분이지만 저는 단순히 table만 구성해서 사용해서 React에서 권유하는 방식 그대로 수정해서 사용했습니다.

 

---

😀 Table 사용할 필요가 생김

인턴도 어느덧 끝나갈 시기 쯤 기존 프로젝트를 구현할 때 유로 컴포넌트를 활용하여 진행 중에 있었습니다. 반응형 브라우저를 구성하면서 모바일에서도 DataGrid를 한눈에 보여주고 싶었습니다. 유로 컴포넌트로는 제약이 있어 보여 직접 Table을 만들어 사용할 필요가 생겼습니다.

 

👊 어떻게 기존 테이블과 비슷하게 만들지?

유료 컴포넌트 테이블의 다른 기능들은 크게 문제될게 없어 보였습니다. 단순히 <tr> 태그나 <td> 태그에 onClick함수로 대부분을 쉽게 구현할 수 있어 보였기 때문이죠. 문제는 테이블 컴포넌트는 헤더와 바디가 분리되어 있고 바디 부분을 스크롤할 수 있었습니다. 정작 더 쉬워 보이는 부분이 저에게는 어렵게 다가왔습니다. 테이블에 속성이 있을까 가장 먼저 생각이 들었지만 검색 결과 없는 옵션이었고 답을 찾기 위해 계속해서 검색을 진행했습니다.

 

👨‍💻 이런 방법이...

와중에 찾은 자료는 헤더 테이블, 바디 테이블을 따로 구분하여 생성하는 방법이었습니다.

먼저 헤더 테이블을 만들어 너비를 지정해주고 그 후 바디 테이블을 만들고 해당 테이블은 스크롤할 수 있도록 속성을 주었습니다.

 

<div className="table-head">
    <table>
        <colgroup>
            <col width="30%"/><col width="35%"/><col width="35%"/>
        </colgroup>
        <tr>
            <td>id</td><td>userId</td><td>title</td>
        </tr>
    </table>
</div>
<div className="table-body">
    <table>
        <colgroup>
            <col width="30%"/><col width="35%"/><col width="35%"/>
        </colgroup>
        <tr>
            <td>강아지</td><td>멍멍이</td><td>개</td>
        </tr>
        <tr>
            <td>고양이</td><td>야옹이</td><td>칡</td>
        </tr>
        <tr>
            <td>참새</td><td>비둘기</td><td>독수리</td>
        </tr>
        <tr>
            <td>삵</td><td>사자</td><td>호랑이</td>
        </tr>
        <tr>
            <td>늑대</td><td>여우</td><td>코요테</td>
        </tr>
        <tr>
            <td>코끼리</td><td>코뿔소</td><td>코알라</td>
        </tr>
        <tr>
            <td>하마</td><td>하이에나</td><td>가젤</td>
        </tr>
        <tr>
            <td>쿼카</td><td>카피바라</td><td>친칠라</td>
        </tr>
    </table>
</div>

 

id

userId

title

강아지	멍멍이	개
고양이	야옹이	칡
참새	비둘기	독수리
삵	사자	호랑이
늑대	여우	코요테
코끼리	코뿔소	코알라
하마	하이에나	가젤
쿼카	카피바라	친칠라

 

즉 두 가지 테이블을 통해 위와 같은 테이블을 만들 수 있었습니다.

 

프로젝트 적용

프로젝트에선 사용자가 봐야할 주요 값들은 테이블 형태를 유지하되 나머지 값들은 아래 div 태그를 만들어 회색 글씨로 작게 만들어 한눈에 모든 정보를 볼 수 있도록 하였습니다.

 

참고: https://grlife.tistory.com/entry/%EA%B0%84%EB%8B%A8%ED%95%98%EA%B2%8C-%ED%85%8C%EC%9D%B4%EB%B8%94-tbody-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

간단하게 테이블 tbody 스크롤 적용하기

 

🤙 마무리

유료 컴포넌트를 사용하면서 쉽게 데이터를 바인딩하고 배치할 수 있어 좋았지만 막상 커스텀이 필요할 경우에는 직접 사용하는 것이 더 쉬웠습니다. 테이블을 직접 만들고 데이터도 바인딩하고 CSS도 표현해볼 수 있는 좋은 경험이었습니다.

더욱이 테이블이 필요한 이유도 모바일에 적합한 적응형 페이지를 만들면서 어떻게 해야 유저가 쉽게 데이터를 확인할 수 있을까 사용할 수 있을까를 생각해보면서 페이지를 어떻게 구성하고 구상해야 하는지 많이 깨달았습니다.