HOWTO · React
React에서 편집 가능한 테이블 만들기
이 튜토리얼에서는 React에서 편집 가능한 테이블을 만드는 방법에 대해 설명합니다.
테이블은 데이터를 시각화하는 모든 애플리케이션에서 가장 중요한 부분입니다. React에는 동적으로 편집할 수 있는 Editable 테이블이라는 테이블이 있으며 주로 사용자가 데이터를 편집할 수 있도록 하는 데 사용됩니다.
이 짧은 기사에서는 설명과 함께 React에서 편집 가능한 테이블을 만드는 방법을 살펴보겠습니다.
React에서 편집 가능한 테이블 만들기
아래 예제는 React를 사용하여 편집 가능한 테이블을 만드는 방법을 보여줍니다. 아래 예제 코드를 따르십시오.
코드 - App.js:
import React from 'react';
export default class DynamicTable extends React.Component {
// Class constructor
constructor(props) {
super(props);
this.state = { Name: '', Data: [] }
}
// An action event on updated data
UpdateData(event) {
this.setState({Name: event.target.value});
}
// A click action
ClickAction() {
var Data = this.state.Data;
Data.push(this.state.Name);
this.setState({Data: Data, Name: ''});
}
// An action event on data change
OnDataChange(i, event) {
var Data = this.state.Data;
Data[i] = event.target.value;
this.setState({Data: Data});
}
// An action event on data delete
OnDataDelete(i) {
var Data = this.state.Data;
Data.splice(i, 1);
this.setState({Data: Data});
}
// Organizing the table
DrawTable() {
var context = this;
return this.state.Data.map(function(o, i) {
return (
<tr key={'item-' + i}>
<td>
<input type='text' value={o} onChange={
context.OnDataChange.bind(context, i)}/>
</td>
<td>
<button onClick={context.OnDataDelete.bind(context, i)}>Delete</button>
</td>
</tr>
);
});
}
// Rendering the UI
render() {
return (
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>{this.DrawTable()}</tbody>
</table>
<hr/>
<input type='text' value={this.state.Name} onChange={this.UpdateData.bind(this)}/>
<button onClick={this.ClickAction.bind(this)}>Add Item </button>
</div>
);
}
}
우리는 이미 각 코드 블록의 목적을 명령했습니다. 이제 아래와 같은 index.js 파일을 살펴보겠습니다.
코드 - index.js:
// importing necessary packages and files
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import DynamicTable from './table.js';
// Specifying the parent element
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<DynamicTable />
</React.StrictMode>
);
reportWebVitals();
모든 파일을 완료하면 브라우저에 아래와 같은 출력이 표시됩니다.
출력:
이 글에서 공유하는 예제 코드는 React JS 프로젝트로 작성되었습니다. React 프로젝트를 실행하려면 시스템에 최신 Node JS 버전이 있어야 합니다.
