데이터 테이블

Data table 의 Reading, Sorting, Selecting, Searching 네 기능을 만든 과제다.

구동 방법

1. Reading: /result 에 이름별 메인 테이블이 나온다. 행을 클릭하면 그 이름의 ID별 서브 테이블이 펼쳐진다.
2. Sorting: 열 이름 옆 버튼으로 오름차순·내림차순 정렬한다. 서브 테이블의 ID 열도 정렬된다.
3. Selecting: 서브 테이블 행을 클릭해 선택하면 테이블 위에 따로 모인다. check all, clear all 로 한 이름의 ID 를 모두 선택·해제하고, X 로 하나씩 뺀다. view 버튼은 선택 목록을 세로·가로로 바꾼다.
4. Searching: 이름에 문자열이 포함된 행을 찾는다. 재검색하면 결과가 누적되고 최근 검색이 위로 온다. refresh 로 초기화한다.

중점 사항

• 리덕스 코드를 떼어 내기 위해 컨테이너 컴포넌트와 프레젠테이셔널 컴포넌트로 나눴다. action 과 reducer 는 modules/ 에 모듈별 한 파일로 두고 redux-actions 의 handleActions 로 읽기 쉽게 했다.
• API 응답을 리스트로 그릴 때 고유 키가 없어서 처음엔 nanoid 를 썼다가, 렌더마다 연산이 생겨 항목 값 조합으로 키를 만들었다. 불변성은 immer 의 produce 로 관리했다.
• 메인·서브 테이블의 로딩은 스피너로 보이고, 정렬 방향은 버튼 색(검정·빨강)으로 표시했다.

플레이그라운드에서 바뀐 것

원래는 과제용 API 서버(http://testapi/result/)에서 데이터를 받았다. 서버가 없어서 같은 모양의 데이터를 public/data/ 에 넣고 거기서 읽도록 바꿨다. 이름과 수치는 임의로 만든 값이다.