React

React Dropdown

Installation and Usage

$ npm install react-dropdown  --save

import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';

const options = [
  'one', 'two', 'three'
];
const defaultOption = options[0];
<Dropdown options={options} onChange={this._onSelect} value={defaultOption} placeholder="Select an option" />;

Table

기본 테이블 구현

<App/> 컴포넌트에서 prop으로 넘긴 columns와 data 배열을 받아 테이블에 랜더링해주는 간단한 React 컴포넌트를 작성하는 방법이다.

App.jsx

import Table from "./Table";

faker.seed(100);

function App() {
  const columns = ["Name", "Email", "Phone"];

  const data = Array(53)
    .fill()
    .map(() => ({
      name: "hellokitty",
      email: "hellokitty.hello.com",
      phone: "010-0000-0000",
    }));

  return <Table columns={columns} data={data} />;
}

export default App;

일반적으로 테이블 UI는 <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>와 같은 다양한 HTML 엘리먼트로 구성된다.

Table.jsx

import React from "react";

function Table({ columns, data }) {
  return (
    <table>
      <thead>
        <tr>
          {columns.map((column) => (
            <th key={column}>{column}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map(({ name, email, phone }) => (
          <tr key={name + email + phone}>
            <td>{name}</td>
            <td>{email}</td>
            <td>{phone}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default Table;

React Table

랜덤 데이터를 생성해주는 faker 라이브러리를 설치

$ npm i faker

columns 객체는 기존에는 단순히 문자열 배열이 었는데, React Table 라이브러리가 이해할 수 있는 객체 배열의 형태로 바꿔줘야 한다.

• accessor 속성에는 해당 열을 data 객체의 어느 속성을 읽어야하는지를 명시
• Header 속성에는 테이블 헤더에 보여줄 텍스트를 명시

columns, data 객체에 React의 useMemo()를 훅(hook) 함수를 적용하면 메모이제이션(memoization)을 통해 불필요한 데이터 생성을 피할 수 있다. 이 때문에 React Table 라이브러리에서는 useMemo()를 사용하는 것을 성능 측면에서 권장하고 있다.

App.jsx

import { useMemo } from "react";
import faker from "faker/locale/ko";
import Table from "./Table";

faker.seed(100);

function App() {
  const columns = useMemo(
    () => [
      {
        accessor: "name",
        Header: "Name",
      },
      {
        accessor: "email",
        Header: "Email",
      },
      {
        accessor: "phone",
        Header: "Phone",
      },
    ],
    []
  );

  const data = useMemo(
    () =>
      Array(53)
        .fill()
        .map(() => ({
          name: faker.name.lastName() + faker.name.firstName(),
          email: faker.internet.email(),
          phone: faker.phone.phoneNumber(),
        })),
    []
  );

  return <Table columns={columns} data={data} />;
}

export default App;

React Table를 사용하기 위해서 npm으로 react-table 패키지를 설치

$ npm i react-table

그 다음,
<Table/> 컴포넌트를 열고 react-table 패키지로 부터 useTable() 훅(hook) 함수를 불러온다. useTable() 함수에는 prop으로 넘어온 columns과 data 객체를 매개변수로 넘기면 테이블을 마크업할 때 사용할 수 있는 다양한 함수와 배열을 반환한다.

예를 들어,

• getTableProps()와 getTableBodyProps() 함수는 각각 <table>과 <tbody> 엘리먼트에 적용해줘야 할 prop을 제공
• headerGroups 배열은 <thead> 부분에서 랜더링해야하는 데이터를 담음
• rows 배열은 <tbody> 부분에서 랜더링해야하는 데이터를 담고 있음
• prepareRow()라는 함수는 랜더링할 데이터를 준비해주는 유틸리티 함수

Table.jsx

import React from "react";
import { useTable } from "react-table";

function Table({ columns, data }) {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({ columns, data });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => (
                <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default Table;

참고문서,
table, https://www.daleseo.com/react-table/

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.