테이블 필터링은 프론트엔드 개발에서 자주 사용되는 기능 중 하나입니다. 사용자가 지정한 기준에 따라 테이블의 데이터를 필터링하여 특정 조건을 충족하는 항목만 보여주는 것을 의미합니다.

자바스크립트에서 테이블 필터링을 구현하는 방법은 여러 가지가 있습니다. 그 중에서도 Nullish Coalescing 연산자를 활용하여 간단하고 간결하게 구현할 수 있습니다.

1. 테이블 데이터 초기화

먼저, 테이블에 표시할 데이터를 초기화해야 합니다. 보통 배열 형태로 데이터를 유지하고 필터링된 결과를 이 배열에서 가져와 테이블을 구성합니다.

const tableData = [
  { id: 1, name: 'John', age: 25, gender: 'Male' },
  { id: 2, name: 'Alice', age: 32, gender: 'Female' },
  { id: 3, name: 'Mike', age: 28, gender: 'Male' },
  // ... more data
];

2. 필터링 함수 작성

다음으로, 필터링을 수행할 함수를 작성해야 합니다. 이 함수는 사용자로부터 입력받은 필터링 기준과 데이터를 비교하여 일치하는 데이터만 반환합니다.

function filterTableData(filterCriteria) {
  return tableData.filter(data => {
    return data.name.toLowerCase().includes(filterCriteria.toLowerCase())
           || data.age === +filterCriteria
           || data.gender.toLowerCase() === filterCriteria.toLowerCase();
  });
}

위 예제에서는 사용자로부터 이름, 나이, 성별 중 하나를 입력받아 필터링 기준으로 사용합니다. 입력값과 일치하는 데이터를 찾기 위해 String.includes, Number.=== 및 String.===를 사용하여 조건을 체크합니다.

3. 필터링된 데이터 표시

마지막으로, 필터링된 데이터를 테이블에 표시해야 합니다. 이때 Nullish Coalescing 연산자인 ??를 사용하여 기본값을 설정하는 방법을 알아보겠습니다.

const filterValue = getInputValue(); // 사용자로부터 입력받은 필터링 값

const filteredData = filterTableData(filterValue) ?? []; // Nullish Coalescing

renderTable(filteredData); // 테이블에 필터링된 데이터를 표시하는 함수 호출

위 예제에서 filterTableData 함수를 호출하여 필터링된 데이터를 가져온 후, 필터링된 결과가 null 또는 undefined인 경우에는 빈 배열 []을 기본값으로 설정합니다. 이렇게하면 화면에 아무것도 표시되지 않는 상황을 방지할 수 있습니다.

마무리

Nullish Coalescing 연산자(??)를 사용하여 자바스크립트에서 테이블 필터링을 간단하게 구현해 보았습니다. 필터링된 데이터를 효과적으로 표시함으로써 사용자는 원하는 정보에 빠르게 액세스할 수 있게 됩니다.

자바스크립트 개발에서 테이블 필터링은 매우 일반적인 요구 사항이므로, 이와 같은 기술을 통해 사용자 경험을 향상시킬 수 있습니다.

#javascript #webdevelopment