[React]테이블 컬럼에서 key와 dataIndex 분리의 필요성

 

React 기반 테이블 컴포넌트에서 컬럼을 정의할 때 key와 dataIndex 속성을 분리하여 사용하는 것은 단순한 중복이 아닌, 명확한 기술적 이점을 제공합니다. 이 문서에서는 이 두 속성을 분리해야 하는 주요 사례와 그 근거를 설명합니다.

1. 동일한 데이터 필드를 다른 방식으로 표시

기술적 근거

동일한 데이터 필드를 여러 형식으로 표시해야 하는 경우, 동일한 dataIndex를 사용하면서 서로 다른 key 값으로 컬럼을 구분할 수 있습니다.

코드 예시

// 데이터
const drivers = [
  {
    id: 1,
    name: "김철수",
    birthDate: "1985-03-15", // YYYY-MM-DD 형식
    registrationDate: "2023-01-10"
  }
]

// 테이블 컬럼
const columns = [
  {
    key: 'birthDateFull',    // 전체 날짜 컬럼
    title: '생년월일(전체)',
    dataIndex: 'birthDate'
  },
  {
    key: 'birthYear',        // 연도만 표시하는 컬럼
    title: '출생년도',
    dataIndex: 'birthDate',  // 같은 데이터 필드 사용
    render: date => date.split('-')[0] + '년'
  }
]

이 예시에서는 birthDate 데이터 필드를 두 가지 다른 방식으로 표시하고 있습니다. React가 이 두 컬럼을 구분할 수 있도록 서로 다른 key 값을 사용하면서, 데이터는 동일한 소스(dataIndex: 'birthDate')에서 가져옵니다.

2. 이벤트 핸들링 및 커스텀 작업용 컬럼

기술적 근거

액션 버튼이나 커스텀 UI 요소를 포함하는 컬럼의 경우, 해당 컬럼은 실제 데이터 모델의 특정 필드를 직접 표시하지 않지만, 작업 수행에 필요한 식별자는 필요합니다.

코드 예시

// 테이블 컬럼
const columns = [
  {
    key: 'driverName',
    title: '운전자명',
    dataIndex: 'name'
  },
  {
    key: 'actions',      // 실제 데이터에는 없는 액션 컬럼
    title: '관리',
    dataIndex: 'id',     // 액션에 필요한 ID 정보만 가져옴
    render: (id) => (
      <div>
        <Button onClick={() => editDriver(id)}>수정</Button>
        <Button onClick={() => deleteDriver(id)}>삭제</Button>
      </div>
    )
  }
]

이 예시에서 actions 컬럼은 데이터 모델에 직접 대응되는 필드가 없지만, 수정/삭제 작업을 위해 id 값이 필요합니다. 따라서 컬럼의 식별자(key)와 데이터 접근 경로(dataIndex)를 분리하여 정의합니다.

3. 백엔드 API 변경에 대응

기술적 근거

백엔드 API의 응답 형식이 변경되는 경우, 프론트엔드의 내부 로직은 유지하면서 데이터 매핑만 변경하고자 할 때 key와 dataIndex의 분리는 큰 이점을 제공합니다.

코드 예시

// 기존 API 응답 형식
const oldDrivers = [
  {
    driver_id: 1,
    driver_name: "김철수",
    driver_code: "D001"
  }
]

// 기존 테이블 컬럼
const oldColumns = [
  {
    key: 'driverName',
    title: '운전자명',
    dataIndex: 'driver_name'  // snake_case 형식의 API 응답
  }
]

// API가 변경된 후의 새 응답 형식
const newDrivers = [
  {
    id: 1,
    name: "김철수",
    code: "D001"
  }
]

// 새 테이블 컬럼 - key는 그대로 유지하여 기존 로직 호환성 유지
const newColumns = [
  {
    key: 'driverName',    // 기존과 동일한 key 유지
    title: '운전자명',
    dataIndex: 'name'     // 변경된 필드명 반영
  }
]

이 예시에서는 API 응답 형식이 driver_name에서 name으로 변경되었지만, 테이블 컬럼의 key 값인 driverName은 유지됩니다. 이렇게 함으로써 테이블 관련 내부 로직(정렬, 필터링, 이벤트 등)에서 컬럼을 참조하는 코드는 수정할 필요 없이 데이터 매핑(dataIndex)만 변경하면 됩니다.

결론

key와 dataIndex를 분리함으로써 얻는 이점은 단순한 코드의 명확성을 넘어 실질적인 유지보수성과 확장성 향상으로 이어집니다. 비록 단순한 테이블에서는 두 값을 동일하게 설정하는 것이 일반적이지만, 복잡한 애플리케이션에서는 이러한 분리가 미래의 요구사항 변화와 데이터 구조 변경에 유연하게 대응할 수 있는 견고한 구조를 제공합니다.