ReactJS - 테이블: 초보자 가이드

안녕하세요, 열정적인 개발자 여러분! 오늘 우리는 ReactJS 테이블의 세상으로 뛰어들어 보겠습니다. 컴퓨터 과학을 가르치고 있었던 몇 년 동안, 테이블은 웹 개발의 무명의 영웅이라고 말할 수 있습니다. 애니메이션보다 화려하지 않고, 모바일优先 디자인보다 유행하지 않지만, 정말 유용하답니다! 그럼 손을 걷어붙이고 시작해 보겠습니다.

테이블 컴포넌트 이해

테이블 컴포넌트는 무엇인가요?

ReactJS에서 테이블 컴포넌트는 데이터를 행과 열로 표시하는 방법입니다. 디지털 스프레드시트를 웹 애플리케이션에 배치할 수 있는 것을 생각해 보세요. 구조화된 정보를 명확하고 체계적으로 표시하는 데 완벽합니다.

React 테이블의 기본 구조

간단한 예제를 시작해 보겠습니다:

import React from 'react';

function SimpleTable() {
return (
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>도시</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>London</td>
</tr>
</tbody>
</table>
);
}

export default SimpleTable;

이 예제에서:

• <table>는 테이블의 주요 컨테이너입니다.
• <thead>는 헤더 행을 포함합니다.
• <tbody>는 데이터 행을 포함합니다.
• <tr>는 테이블 행을 나타냅니다.
• <th>는 헤더 셀을 사용합니다.
• <td>는 데이터 셀을 사용합니다.

테이블 컴포넌트 적용

이제 기본 개념을 이해했으므로, React의 컴포넌트 구조와 props를 사용하여 더 유연한 테이블을 만들어 보겠습니다.

import React from 'react';

function DynamicTable({ data }) {
return (
<table>
<thead>
<tr>
{Object.keys(data[0]).map((header) => (
<th key={header}>{header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, index) => (
<tr key={index}>
{Object.values(row).map((cell, cellIndex) => (
<td key={cellIndex}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
);
}

export default DynamicTable;

이 컴포넌트는 더 유연합니다:

• data prop을 받아들이며, 이는 객체의 배열입니다.
• 첫 번째 데이터 객체의 키를 기반으로 헤더를 동적으로 생성합니다.
• 데이터 배열의 각 항목에 대해 행을 생성합니다.

이 컴포넌트를 사용하려면:

import React from 'react';
import DynamicTable from './DynamicTable';

function App() {
const tableData = [
{ name: "John Doe", age: 30, city: "New York" },
{ name: "Jane Smith", age: 25, city: "London" },
{ name: "Bob Johnson", age: 35, city: "Paris" }
];

return (
<div>
<h1>사용자 데이터</h1>
<DynamicTable data={tableData} />
</div>
);
}

export default App;

다크 버전과 열.strip 추가

테이블을 시각적으로 더 매력적이고 읽기 쉽게 만들기 위해 다크 버전과 열.strip을 추가해 보겠습니다.

import React from 'react';
import './Table.css'; // 스타일 파일을 생성합니다

function EnhancedTable({ data, darkMode = false }) {
const tableClass = darkMode ? 'table dark' : 'table';

return (
<table className={tableClass}>
<thead>
<tr>
{Object.keys(data[0]).map((header) => (
<th key={header}>{header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, index) => (
<tr key={index} className={index % 2 === 0 ? 'even' : 'odd'}>
{Object.values(row).map((cell, cellIndex) => (
<td key={cellIndex}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
);
}

export default EnhancedTable;

이제 CSS 파일(Table.css)을 생성하여 테이블을 스타일링하겠습니다:

.table {
border-collapse: collapse;
width: 100%;
}

.table th, .table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

.table th {
background-color: #f2f2f2;
font-weight: bold;
}

.table .even {
background-color: #f9f9f9;
}

.table.dark {
color: white;
background-color: #333;
}

.table.dark th {
background-color: #444;
}

.table.dark .even {
background-color: #2a2a2a;
}

.table.dark .odd {
background-color: #333;
}

이 CSS는 다음을 제공합니다:

• 기본 테이블 스타일을 테두리와 패딩으로 설정합니다.
• 가독성을 높이기 위해 열.strip을 추가합니다.
• 다크 모드 버전의 테이블을 설정합니다.

이 향상된 테이블을 사용하려면:

import React from 'react';
import EnhancedTable from './EnhancedTable';

function App() {
const tableData = [
{ name: "John Doe", age: 30, city: "New York" },
{ name: "Jane Smith", age: 25, city: "London" },
{ name: "Bob Johnson", age: 35, city: "Paris" }
];

return (
<div>
<h1>사용자 데이터 (라이트 모드)</h1>
<EnhancedTable data={tableData} />

<h1>사용자 데이터 ( 다크 모드)</h1>
<EnhancedTable data={tableData} darkMode={true} />
</div>
);
}

export default App;

결론

이제 여러분은 기본 정적 테이블에서 동적, 스타일 있는, 유연한 테이블 컴포넌트로 여정을 떠났습니다. 테이블은 웹 개발의 스위스 아미 Knife와 같습니다. 간단해 보일 수 있지만, 올바르게 사용하면 매우 다재다능하고 강력합니다.

React 여정을 계속하면서, 데이터를 표시하는 다양한 방법을 실험해 보세요. 테이블은 시작입니다! 누구 knows? 다음 번에는 정렬, 필터링, 심지어 편집 가능한 테이블을 다룰 수도 있습니다. 가능성은 무한합니다!

계속 코딩하고, 호기심을 유지하며, 기억하세요: 프로그래밍 세계에서 모든 오류 메시지는 새로운 학습 기회의 복장을 한 것입니다. 행복한 코딩을 기원합니다!

메서드	설명
Object.keys()	주어진 객체의 프로퍼티 이름 배열을 반환합니다
Object.values()	주어진 객체의 프로퍼티 값 배열을 반환합니다
Array.map()	배열의 각 요소에 대해 제공된 함수를 호출하여 새로운 배열을 생성합니다
Array.prototype.indexOf()	주어진 요소가 배열에서 처음 발견되는 인덱스를 반환합니다
String.prototype.toLowerCase()	호출된 문자열을 소문자로 변환합니다
String.prototype.toUpperCase()	호출된 문자열을 대문자로 변환합니다

Credits: Image by storyset