[Spring, React] 고객 명단을 관리할 테이블(표) 만들기!

 

 

고객 정보를 보여줄
표를 만들어보자!

 

 

 

 

1. 화면

고객 정보가 화면에 보이도록 하며, 맨 끝에 수정과 삭제 버튼이 나오도록 만들어볼 것이다.

 

 

 

 

---

 

 

 

 

2. 전체 코드

                     <table className="sheet">
                        <colgroup>
                            {columns.map((data, i) => (
                                <col key={i} style={{ width: data.width }} />
                            ))}
                        </colgroup>

                        <thead>
                        <tr>
                            {columns.map((data, i) => (
                                <th key={i}>
                                    {data.header}
                                </th>
                            ))}
                        </tr>
                        </thead>

                        <tbody>
                        {rows.length === 0 ? (
                            <tr className="empty-row">
                                <td colSpan={columns.length}>표시할 데이터가 없습니다.</td>
                            </tr>
                        ) : (
                            pagedRows.map((row, rIdx) => (
                                <tr key={row.id ?? startIndex + rIdx} data-grade={row.grade}>

                                    <td>{row.name}</td>
                                    <td>{row.grade}</td>
                                    <td>{row.phone}</td>
                                    <td>{row.code}</td>
                                    <td>{row.note}</td>

                                    <td>
                                        <div className="edit-delete">
                                            <button
                                               className="btn-edit"
                                                onClick={() => handleEdit(row)}
                                            >
                                                수정
                                            </button>
                                            <button
                                                className="btn-delete"
                                                onClick={() => handleDelete(row.id)}
                                            >
                                                삭제
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            ))
                        )}
                        </tbody>
                    </table>

 

 

 

 

 

---

 

 

 

 

 

3. 기본 개념

• 테이블: 행과 열로 구성된 구조화된 데이터 집합(표 형식의 데이터)이다.
• <table> : 테이블 태그
• <colgroup> : 테이블 내에서 열그룹을 지정
• <col> : <colgruop> 안에서 사용하며, 테이블 셀의 열(세로방향)을 나타냄
• <thead> : 머리글, 제목을 달며 <table>이 부모고 <tr>이 자식임
• <tr> : 테이블 셀의 행(가로방향)을 나타냄
• <th> : 행과 열의 제목임
• <tbody> : 실제 데이터 내용을 채움(그룹화)
• <td> : 실제 데이터 내용을 하나하나 채움

 

 

 

---

 

 

 

 

4. 코드 설명

const columns = [
    { header: "이름", accessor: "name", width: 140 },
    { header: "등급", accessor: "grade", width: 100 },
    { header: "연락처", accessor: "phone", width: 160 },
    { header: "초대코드", accessor: "code", width: 100 },
    { header: "메모", accessor: "note", width: 250 },
    { header: "관리", accessor: "actions", width: 140 },
];

                        <colgroup>
                            {columns.map((data, i) => (
                                <col key={i} style={{ width: data.width }} />
                            ))}
                        </colgroup>

colgroup은 테이블 내에서 열그룹을 정의한다. 여기서 columns는 return 외부에 따로 정의해뒀다. map 함수를 사용하여 열을 지정했는데, map 함수는 기존 배열의 각 요소들을 원하는 특정 규칙이나 로직이 있는 콜백 함수를 통해 변환한 후 변환된 요소들로 구성된 새로운 배열을 만드는 역할을 한다. 

코드가 어떻게 돌아가는지 자세하게 살펴보자. key의 i가 0이 된다. 그러면 첫번째인 이름이 해당되고, style엔 정의해둔 너비 140이 오게된다. 이 과정이 배열이 끝날때까지 반복하게 된다.

data는 columns의 데이터를 받아오도록 임시적으로 붙인 이름이다. columns는 총 6개니까 6번의 반복으로 열을 만들거고, 각 열의 크기는 columns에 지정된 width를 따를 것이다.

 

                        <thead>
                        <tr>
                            {columns.map((data, i) => (
                                <th key={i}>
                                    {data.header}
                                </th>
                            ))}
                        </tr>
                        </thead>

thead의 부모는 table이고 자식은 tr이다. thead는 제목을 달 때 적어준다. 왜 이런걸 굳이 적을까? 바로 테이블 구조를 의미있게 나누기 위함이다. tr은 행(가로)을 의미한다. 그리고 그 안의 th가 직접 이름이 들어가는 역할을 가진다.

동작은 위의 코드와 매우 유사하다. colums의 header란에 적힌 내용을 들고와서 th에 넣는다. 

 

                        {/* tbody는 실제 데이터 내용을 채운다. thead와 의미를 구분한다! */}
                        <tbody>
                        {/* 조건부 렌더링으로 길이가 0일 때, (맞으면 이거 실행해) : (아니면 이거 실행해) */}
                        {rows.length === 0 ? (
                        {/* td는 실제 데이터나 내용을 담음 */}
                        {/* coldSpan을 써서 칸을 모두 합친 뒤 텍스트를 표시함 */}
                            <tr className="empty-row">
                                <td colSpan={columns.length}>표시할 데이터가 없습니다.</td>
                            </tr>
                        ) : (
                            {/* pagedRows는 10개니까 rIdx는 0에서 9가 된다. */}
                            pagedRows.map((row, rIdx) => (

                        {/* ??는 널 병합 연산자이다.row.id가 null이면 startIndex + rIdx를 사용한다. */}
                        {/* row.id가 있다면 row.id를 쓰겠지만, 혹시 모르니 안전장치로 설정했다. */}
                        {/* rIdx는 0에서 9, startIndex는 만약 1페이지라면 0에서 시작, 2페이지라면 10에서 시작 */}
                        {/* 다음에 설명하겠지만, 페이지네이션이 적용되어있어서 그렇다. 한 페이지당 10개만 보이도록 설정했음 */}
                        
                        {/* tr은 각 가로행을 말해서, key로 각 행을 구별함 */}
                                <tr key={row.id ?? startIndex + rIdx} data-grade={row.grade}>
                                
                                    {/* td는 실제 데이터와 내용을 담음 */}
                                    {/* 직접 하나하나 돌리는 방식으로 변경했음, 버튼 넣어야해서 */}
                                    {/* 각 행의 key에 맞춰 정보들이 나열됨 */}
                                    <td>{row.name}</td>
                                    <td>{row.grade}</td>
                                    <td>{row.phone}</td>
                                    <td>{row.code}</td>
                                    <td>{row.note}</td>

                                    {/*수정, 삭제 버튼도 옆에 나열됨*/}
                                    <td>
                                        <div className="edit-delete">
                                            <button
                                               className="btn-edit"
                                                onClick={() => handleEdit(row)}
                                            >
                                                수정
                                            </button>
                                            <button
                                                className="btn-delete"
                                                onClick={() => handleDelete(row.id)}
                                            >
                                                삭제
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            ))
                        )}
                        </tbody>
                    </table>
                </div>