React에서 테이블 사용: 가져온 데이터를 렌더링하고 편집하는 방법

최근 프로젝트에서, 나와 나의 팀은 전방에 테이블을 구축하기를 희망한다. (React 사용) 이 테이블은 우리가 후방에서 추출한 데이터를 저장할 것이다. (Ruby와 Sinatra로 데이터베이스와 API 경로를 구축)
다른 게시물 (마지막 링크) 은 데이터를 표에 넣는 데 매우 도움이 되지만, 우리는 표 데이터를 편집하고, 패치 요청을 사용하여 이러한 편집을 유지할 수 있기를 희망합니다.이것은 React에 있는 상태의 작업 방식과 React 구성 요소의 조직 방식을 고려하면 임무입니다.나는 우리가 편집 기능을 어떻게 통합하는지 공유할 가치가 있다고 생각한다.

이 문장의 기본 개요--당신이 필요로 하는 곳으로 뛰어가다

단계 1: 테이블에 데이터 렌더링

GET-fetch를 사용하여 데이터를 가져오는 방법

테이블 행에 데이터를 밀어넣는 방법

2단계: 편집 기능 구축

편집할 데이터 캡처 방법

EditForm 어셈블리를 생성하는 방법;필요에 따라 표시/숨기기

패치 요청을 생성하고 변경 사항을 제출하는 방법

간단한 구성 요소 매핑

여기에서 구성 요소 관계가 어떻게 정의되고, 각 구성 요소의 주요 직책이 무엇인지 볼 수 있습니다.우리는 고객 데이터를 예로 들 것이다.

1단계: 테이블에 데이터 렌더링

Fetch를 사용하여 데이터 가져오기

다음은fetch로 데이터를 가져와state에 저장하는 첫 번째 단계를 보실 수 있습니다.

// App.js
import React, { useEffect, useState } from "react";
import Customers from "./Customers";

function App() {
// set state
  const [customers, setCustomers] = useState([]);

// first data grab
  useEffect(() => {
    fetch("http://localhost:9292/customers") // your url may look different
      .then(resp => resp.json())
      .then(data => setCustomers(data)) // set data to state
  }, []);

return (
    <div>
      {/* pass data down to the Customers component where we'll create the table*/}
      <Customers customers={customers} />
    </div>
  );
}
export default App

테이블에 데이터 배치

일단 Customers 구성 요소에 데이터를 전달하면, 데이터를 전송하는 테이블 (HTML 태그 테이블) 을 만들어야 합니다.내부에 열 이름이 있는 헤더 (thead) 와 데이터 줄이 있는 헤더 (tbody) 를 삽입할 수 있습니다.

// Customers.js
import React from 'react'
import Customer from './Customer'

function Customers({customers}) {

  return (
        <table>
          <thead>
            <tr>
              <th>Customer ID</th>
              <th>Name</th>
              <th>Email</th>
              <th>Phone</th>
              <th>Modify Customer</th> // where you'll put the edit button
            </tr>
          </thead>
          <tbody>
            {/* iterate through the customers array and render a unique Customer component for each customer object in the array */}
            { customers.map(customer => <Customer key={customer.id} customer={customer} />) }
          </tbody>
        </table>
  )
}

export default Customers

Customer 구성 요소를 포맷할 때 가장 중요한 것은 어떤 HTML 태그를 사용하는지 주의하는 것이다.Customer가 테이블에 표시되므로 최상위 HTML 요소는 테이블 행(tr)이어야 합니다.

// Customer.js
import React from 'react'

// deconstructed props
function Customer({customer:{id, name, email, phone} }) {

  return (
        <tr key={id}>
            <td>{id}</td>
            <td>{name}</td>
            <td>{email}</td>
            <td>{phone}</td>
            <td><button>Edit</button></td>
        </tr>
  )
}
export default Customer

이때 우리는 표에서 데이터를 성공적으로 나타냈다.이제 재미있는 부분: 편집 기능 만들기!

단계 2: 편집 기능 구축

데이터베이스에 오래 지속되는 방식으로 표 데이터를 편집하기 위해서, 우리는 여러 개의 구성 요소를 뛰어넘어 새로운 기능을 구축해야 한다.
Dell의 주요 관심사는 다음과 같습니다.

편집하려는 고객 데이터 캡처

EditCustomer 어셈블리를 생성합니다.필요에 따라 표시/숨기기

캡처된 고객 데이터를 편집 양식에 전달

변경 사항을 커밋하기 위한 패치 요청 생성

브라우저에서 고객 데이터 자동 업데이트

임무의 복잡성 때문에, 나는 모든 임무의 간단한 설명부터 시작할 것이다.그리고 모든 구성 요소에 완전히 업데이트된 코드 블록을 포함할 것입니다.몇몇 코드는 더 효율적으로 작성될 수 있지만, 나는 목표를 더욱 명확하게 정하려고 한다.

고객 데이터 캡처

우리는 그 중에서 변경해야 하는 입력 필드를 필요로 하지만, 표 밖에서 변경해야 한다.탭을 입력하면 테이블 내에 오류가 발생하므로 Customer에서 캡처한 데이터를 Customers에 전달한 다음 EditCustomer 구성 요소로 다시 전달해야 합니다.

EditCustomer 어셈블리 생성하기;조건부로 나타나다

EditCustomer는 React 모범 사례에 따라 별도의 구성 요소여야 합니다.이 구성 요소는 폼과 패치 요청 기능을 저장합니다.
이 구성 요소를 조건부로 표시할 수 있습니다.이전 게시물에서 이 기술에 대한 정보를 더 많이 볼 수 있습니다.

EditCustomer에 캡처된 고객 전달

Customers에 정의된 상태를 사용하여 캡처된 고객 데이터를 저장한 다음 편집 양식에 전달할 수 있습니다.이것은 패치 요청을 제출할 때 이중 도움이 됩니다.

지속성을 위한 패치 요청 작성

패치 요청은 EditCustomer 구성 요소에 존재하며 캡처된 고객 데이터를 저장하는 상태와 변경 사항을 제출합니다.

업데이트된 데이터 자동 표시

우리는 고객 상태를 정의하는 같은 구성 요소에서 (응용 프로그램에서) 함수를 사용한 다음, 이 함수를 도구로 필요한 구성 요소와 관련 함수에 전달해야 한다.이 함수는 자동으로 업데이트된 데이터를 페이지에 표시합니다.

구성 요소 코드 블록

응용 프로그램

import React, { useEffect, useState } from "react";
import Customers from "./Customers";

function App() {
// set state
  const [customers, setCustomers] = useState([]);

// first data grab
  useEffect(() => {
    fetch("http://localhost:9292/customers")
      .then((resp) => resp.json())
      .then((data) => {
        setCustomers(data)
      });
  }, []);

// update customers on page after edit
  function onUpdateCustomer(updatedCustomer) {
    const updatedCustomers = customers.map(
      customer => {
        if (customer.id === updatedCustomer.id) {
          return updatedCustomer
        } else {return customer}
      }
    )
    setCustomers(updatedCustomers)
  }

  return (
    <div>
      <Customers
        customers={customers}
        onUpdateCustomer={onUpdateCustomer}
      />
    </div>
  );
}
export default App;

거래처

import React, {useState} from 'react'
import Customer from './Customer'
import EditCustomer from './EditCustomer'

function Customers({customers, onUpdateCustomer}) {
// state for conditional render of edit form
  const [isEditing, setIsEditing] = useState(false);
// state for edit form inputs
  const [editForm, setEditForm] = useState({
    id: "",
    name: "",
    email: "",
    phone: ""
  })

// when PATCH request happens; auto-hides the form, pushes changes to display
  function handleCustomerUpdate(updatedCustomer) {
      setIsEditing(false);
      onUpdateCustomer(updatedCustomer);
    }

// capture user input in edit form inputs
  function handleChange(e) {
    setEditForm({
    ...editForm,
    [e.target.name]: e.target.value
    })
  }

// needed logic for conditional rendering of the form - shows the customer you want when you want them, and hides it when you don't
  function changeEditState(customer) {
    if (customer.id === editForm.id) {
      setIsEditing(isEditing => !isEditing) // hides the form
    } else if (isEditing === false) {
      setIsEditing(isEditing => !isEditing) // shows the form
    }
  }

// capture the customer you wish to edit, set to state
  function captureEdit(clickedCustomer) {
    let filtered = customers.filter(customer => customer.id === clickedCustomer.id)
    setEditForm(filtered[0])
  }

  return (
      <div>
        {isEditing?
          (<EditCustomer
            editForm={editForm}
            handleChange={handleChange}
            handleCustomerUpdate={handleCustomerUpdate}
          />) : null}
        <table>
          <thead>
            <tr>
              <th>Customer ID</th>
              <th>Name</th>
              <th>Email</th>
              <th>Phone</th>
              <th>Modify Customer</th>
            </tr>
          </thead>
          <tbody>
              { customers.map(customer =>
                <Customer
                  key={customer.id}
                  customer={customer}
                  captureEdit={captureEdit}
                  changeEditState={changeEditState}
                />) }
          </tbody>
        </table>
      </div>
   )
}
export default Customers

손님: 네.

import React from 'react'

function Customer({customer, customer:{id, name, email, phone}, captureEdit, changeEditState}) {

    return (
        <tr key={id}>
            <td>{id}</td>
            <td>{name}</td>
            <td>{email}</td>
            <td>{phone}</td>
            <td>
                <button
                  onClick={() => {
                    captureEdit(customer);
                    changeEditState(customer)
                  }}
                >
                  Edit
                </button>
            </td>
        </tr>
    )
}
export default Customer

고객 편집

import React from 'react'

function EditCustomer({ editForm, handleCustomerUpdate, handleChange }) {
    let {id, name, email, phone} = editForm

// PATCH request; calls handleCustomerUpdate to push changes to the page
    function handleEditForm(e) {
        e.preventDefault();
        fetch(`http://localhost:9292/customers/${id}`, {
            method: "PATCH",
            headers: {
                "Content-Type" : "application/json"
            },
            body: JSON.stringify(editForm),
        })
            .then(resp => resp.json())
            .then(updatedCustomer => {
                handleCustomerUpdate(updatedCustomer)})
    }

    return (
        <div>
            <h4>Edit Customer</h4>
            <form onSubmit={handleEditForm}>
                <input type="text" name="name" value={name} onChange={handleChange}/>
                <input type="text" name="email" value={email} onChange={handleChange}/>
                <input type="text" name="phone" value={phone} onChange={handleChange}/>
                <button type="submit">Submit Changes</button>
            </form>
        </div>
    )
}
export default EditCustomer

결론

여기 있다!이제 React를 사용할 때 테이블로 데이터를 전송하고 페이지의 데이터를 편집할 수 있습니다.
독자 피드백: 더 좋은 방법이 있습니까?내가 주를 잘못 놓았습니까?조기 직업 엔지니어에게 전할 수 있는 건의가 있습니까?다음 토론에서 공유!
너는 이 강좌가 유용하다고 생각하니?더 많은 멋진 댓글을 좋아하고 지켜봐주세요!

리소스