웹 애플리케이션의 복잡성이 증가함에 따라 테이블은 많은 웹 애플리케이션의 필수 구성 요소 중 하나가 되었습니다. 그러나 강력하고 유지 관리가 쉬운 테이블을 구축하려면 상당한 시간과 노력을 투자해야 합니다. 이 문제를 해결하기 위해 Go 언어와 React를 사용하여 여러 프로젝트에서 사용할 재사용 가능한 테이블 구성 요소를 구축할 수 있습니다.
이 기사에서는 Go 언어와 React를 사용하여 테이블 구성 요소를 빌드하여 프로젝트에서 쉽게 재사용하는 방법을 소개합니다.
테이블 구성요소 작성을 시작하기 전에 몇 가지 기본 개념을 이해해야 합니다. 테이블 구성 요소는 일반적으로 다음 부분으로 구성됩니다.
아직 Go 언어 및 React를 설치하지 않았다면 먼저 설치하세요. 다음 링크에서 다운로드하여 설치할 수 있습니다.
설치가 완료된 후, Go 버전은 1.11 이상이며 React 버전은 16.x 이상입니다.
이제 기본 테이블 구성 요소를 만들어 보겠습니다. React를 사용하여 컴포넌트를 만들고 Go 언어를 사용하여 백그라운드에서 데이터를 처리해 보겠습니다. 먼저 명령줄에서 새 Go 언어 프로젝트를 만들어야 합니다.
$ mkdir my-table-app $ cd my-table-app $ go mod init my-table-app
그런 다음 프로젝트에서 새 React 구성 요소를 만들어야 합니다. 프로젝트의 루트 디렉터리에서 다음 명령을 실행합니다.
$ npx create-react-app my-table-app $ cd my-table-app
이제 React 프로젝트를 생성했으므로 기본 테이블 구성 요소를 작성해 보겠습니다. src 디렉터리에 "Table.js"라는 파일을 만듭니다. 이 파일에서는 기본 테이블을 생성하는 코드를 작성합니다.
import React from 'react';
function Table(props) {
return (
<>
<table>
<thead>
<tr>
{props.columns.map(column => (
<th>{column}</th>
))}
</tr>
</thead>
<tbody>
{props.rows.map(row => (
<tr>
{Object.values(row).map(value => (
<td>{value}</td>
))}
</tr>
))}
</tbody>
</table>
</>
);
}
export default Table;이 구성 요소에는 열과 행이라는 두 가지 속성이 있습니다. columns 속성은 테이블의 모든 열 제목을 포함하는 배열이고, 행 속성은 테이블의 모든 행에 대한 데이터를 포함하는 배열입니다. 구성 요소에서는 map() 함수를 사용하여 이 데이터를 반복하고 테이블로 렌더링합니다.
다음으로 테이블 데이터를 얻기 위해 Go 언어로 인터페이스를 구현해야 합니다. Go 언어에서는 gin 프레임워크를 사용하여 RESTful API를 쉽게 만들 수 있습니다. 먼저 프로젝트에 gin 프레임워크를 설치해야 합니다. 명령줄에서 다음 명령을 실행합니다.
$ go get -u github.com/gin-gonic/gin
그런 다음 프로젝트 루트 디렉터리에 "main.go"라는 파일을 만들고 다음 코드를 작성합니다.
package main
import (
"net/http"
"github.com/gin-gonic/gin"
)
type Row struct {
ID int
Name string
Age int
Location string
}
var rows = []Row{
{1, "John", 28, "New York"},
{2, "Jane", 32, "Chicago"},
{3, "Mary", 24, "San Francisco"},
{4, "Bob", 41, "Miami"},
}
func main() {
r := gin.Default()
r.GET("/api/rows", func(c *gin.Context) {
c.JSON(http.StatusOK, gin.H{
"rows": rows,
})
})
r.Run(":8080")
}이 파일에서는 Row 구조라는 파일을 정의합니다. ID, 이름, 연령 및 위치의 네 가지 속성이 포함되어 있습니다. 그런 다음 테이블의 모든 행 데이터를 포함하는 배열 행을 정의합니다. 다음으로 요청이 도착하면 모든 행에 대한 데이터를 반환하는 "/api/rows"라는 API 인터페이스를 만들었습니다. 마지막으로 r.Run(":8080") 메서드를 사용하여 API 서비스를 시작했습니다.
이제 테이블 구성요소 및 데이터 수집 인터페이스 작성이 완료되었습니다. 이를 함께 모아 완전한 테이블 애플리케이션을 구현해 보겠습니다. 먼저 React 프로젝트의 루트 디렉터리에서 다음 명령을 실행하여 Axios 및 React Table 구성 요소 라이브러리를 설치합니다.
$ npm install axios react-table
그런 다음 src 디렉터리에 "App.js"라는 파일을 만들고 다음 코드를 작성해야 합니다.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Table from './Table';
import './App.css';
import 'react-table/react-table.css';
function App() {
const [columns, setColumns] = useState([]);
const [rows, setRows] = useState([]);
useEffect(() => {
axios.get('/api/rows').then(response => {
setColumns(Object.keys(response.data.rows[0]));
setRows(response.data.rows);
});
}, []);
return (
<div className="App">
<h1>My Table App</h1>
<Table columns={columns} rows={rows} />
</div>
);
}
export default App;이 구성 요소에서는 useState() 및 useEffect() 후크를 사용하여 구성 요소의 상태를 관리합니다. useEffect()에서는 Axios 라이브러리를 사용하여 API 인터페이스에 GET 요청을 보내고 응답 데이터를 콜백 함수의 구성 요소 상태로 설정합니다. 마지막으로, 이 상태 데이터를 이전에 만든 테이블 구성 요소에 전달하여 페이지에 테이블을 렌더링합니다.
이 기사에서는 Go 언어와 React를 사용하여 재사용 가능한 테이블 구성 요소를 구축하고 이를 시연하기 위한 간단한 웹 애플리케이션을 만들었습니다. 이러한 기술을 사용하면 테이블 구성 요소를 쉽게 재사용하고 다양한 프로젝트에서 테이블 코드를 작성하는 데 드는 시간과 노력을 줄일 수 있습니다. Go 언어와 React에 대해 더 자세히 알고 싶다면 공식 문서를 참고하세요.
위 내용은 Go 및 React를 사용하여 재사용 가능한 테이블 구성 요소를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
