React 테이블 정렬 기능 구현하기 : 클라이언트 정렬부터 was서버까지 -1

이번 글에서는 React를 사용하여 게시판 테이블에 정렬 기능을 구현하는 방법을 남겨보도록 하겠습니다. 특히, 이번 글에서는 클라이언트 측 정렬에 초점을 맞추어 작업을 진행합니다. 

썸네일

📌 목표

• React에서 테이블 데이터를 특정 열 기준으로 오름차순/내림차순 정렬
• 빈 값(null, undefined, 빈 문자열)을 안전하게 처리
• 모든 컬럼(열)에 동적으로 정렬 기능 추가

📂 프로젝트 구조

이번 예제에서는 아래와 같은 간단한 구조로 작업합니다:

• React 컴포넌트: 게시판 데이터를 렌더링하고 정렬 로직을 처리
• 데이터: 간단한 JSON 배열로 가상의 게시판 데이터를 사용

🛠️ 구현 단계

1️⃣ 초기 데이터 준비하기

먼저, 가상의 게시판 데이터를 준비합니다. 이 데이터는 JSON 형식으로 만들어졌으며, 각 항목은 번호(rowNum), 이메일(usersEmail), 접속기기(usersLoginDevice), 접속경로(usersLoginCours), 접속날짜(regDt)를 포함합니다.

저는 작업이 서버(was)단에서 연결되어 데이터를 가지고 오고있어서 클라이언트 화면만 정렬을 넣었더니.. 다시 서버단도 해야하는 그런 불상사가 있었습니다.

// 예제 데이터
const initialData = [
  { rowNum: 1, usersEmail: "user1@example.com", usersLoginDevice: "PC", usersLoginCours: "Home", regDt: "2024-11-20" },
  { rowNum: 2, usersEmail: "user2@example.com", usersLoginDevice: "Mobile", usersLoginCours: null, regDt: "2024-11-21" },
  { rowNum: 3, usersEmail: "user3@example.com", usersLoginDevice: "", usersLoginCours: "Dashboard", regDt: "2024-11-19" },
];

[Tip]: 실제 프로젝트에서는 이 데이터를 서버에서 받아오지만, 이번 예제에서는 간단히 JSON 배열로처리 했습니다.

2️⃣ 상태 관리하기 (useState)

React의 useState를 사용하여 데이터를 관리합니다. 초기 데이터는 위에서 만든 JSON 배열을 사용하며, 정렬 상태를 관리하기 위해 별도의 상태(sortConfig)를 추가합니다.

import React, { useState } from 'react';

const UsersAccessHistory = () => {
  // 데이터 상태
  const [usersAccessHsitoryList, setUsersAccessHistoryList] = useState(initialData);

  // 정렬 상태
  const [sortConfig, setSortConfig] = useState({ key: '', direction: 'asc' });
};

1. usersAccessHsitoryList: 현재 화면에 표시될 테이블 데이터를 관리합니다.
2. sortConfig: 현재 정렬 중인 열(key)과 방향(direction)을 저장합니다.
3. "asc": 오름차순 / "desc": 내림차순.

---

3️⃣ 정렬 함수 작성하기

`sortData` 함수: 사용자가 특정 열의 헤더를 클릭했을 때 호출되어 데이터를 정렬합니다.

const sortData = (key) => {
  let direction = 'asc';

  // 동일한 열을 다시 클릭하면 방향 변경
  if (sortConfig.key === key && sortConfig.direction === 'asc') {
    direction = 'desc';
  }

  // 정렬 상태 업데이트
  setSortConfig({ key, direction });

  // 데이터 복사 후 정렬
  const sortedData = [...usersAccessHsitoryList].sort((a, b) => {
    const valA = a[key] ?? ''; // null 또는 undefined 처리
    const valB = b[key] ?? '';

    // null 또는 undefined는 항상 뒤로 보냄
    if (valA === null || valA === undefined) return 1;
    if (valB === null || valB === undefined) return -1;

    // 빈 문자열은 유효한 값 뒤로 보냄
    if (valA === '' && valB !== '') return 1;
    if (valB === '' && valA !== '') return -1;

    // 숫자 비교
    if (typeof valA === 'number' && typeof valB === 'number') {
      return direction === 'asc' ? valA - valB : valB - valA;
    }

    // 문자열 비교
    if (typeof valA === 'string' && typeof valB === 'string') {
      return direction === 'asc'
        ? valA.localeCompare(valB)
        : valB.localeCompare(valA);
    }

    return 0; // 기본 반환값
  });

  setUsersAccessHistoryList(sortedData); // 정렬된 데이터 업데이트
};

1. `key`: 클릭한 열의 이름(예: `rowNum`, `usersEmail` 등).
2. `direction`: 오름차순(`asc`) 또는 내림차순(`desc`). 동일한 열 클릭 시 반대로 변경됩니다.
3. `null`, `undefined`, 빈 문자열 처리:
• `null`과 `undefined`는 항상 뒤로 이동.
• `""`(빈 문자열)은 유효한 값 뒤로 이동.
• `localeCompare`: 문자열 비교에 사용됩니다.

---

4️⃣ 테이블 헤더에 클릭 이벤트 추가하기

이제 테이블 헤더에 클릭 이벤트를 추가하여 사용자가 특정 열을 기준으로 데이터를 정렬할 수 있도록 합니다.

  {/* 각 열에 클릭 이벤트 추가 */} sortData('rowNum')}>
    번호 {sortConfig.key === 'rowNum' && (sortConfig.direction === 'asc' ? '▲' : '▼')}
   sortData('usersEmail')}>
    이메일 {sortConfig.key === 'usersEmail' && (sortConfig.direction === 'asc' ? '▲' : '▼')}
   sortData('usersLoginDevice')}>
    접속기기 {sortConfig.key === 'usersLoginDevice' && (sortConfig.direction === 'asc' ? '▲' : '▼')}
   sortData('usersLoginCours')}>
    접속경로 {sortConfig.key === 'usersLoginCours' && (sortConfig.direction === 'asc' ? '▲' : '▼')}
   sortData('regDt')}>
    접속날짜 {sortConfig.key === 'regDt' && (sortConfig.direction === 'asc' ? '▲' : '▼')}
  

• `onClick`: 클릭 이벤트로 특정 열의 헤더를 클릭하면 해당 열 기준으로 데이터를 정렬합니다.
• `▲`/`▼`: 현재 정렬 상태(오름차순/내림차순)를 시각적으로 표시하려고 추가 했습니다.

📌 마무리 및 다음 단계 예고

이번 글에서는 React에서 클라이언트 측에서만 동작하는 테이블 정렬 기능을 구현했습니다. 구현하는데 쳇과장 에 도움을 받아서 화면단에 적용을 했지만.. 전체 데이터의 정렬은 적용하지 못하여 다시 구글링하고 췟과장 에게 도움을 받아 또 진행 하고 있네요.

다음 글에서는 서버(WAS)와 연동하여 전체 데이터를 대상으로 sql 쿼리를 수정해서 데이터의 정렬 기능은 다시 한번더 수정해볼까 합니다.