1. 테이블 컴포넌트
🚫 문제 - 테이블을 정적으로가 아닌 동적으로 재활용 가능한 컴포넌트로 만들수 없을까?
👉 code는 open sandBox를 확인하면 볼수있습니다.
💡 문제해결
처음에 수정전 테이블처럼 정적인 테이블로 만들었었지만 다른 페이지에서 자주 사용을 하기에 수정후와 같이 동적인 테이블로 변경을 하였습니다.
이때 ViewModel에서 많은 노력이 필요했습니다.
그중 핵심은 데이터 가공이 핵심이었는데, 데이터는 크게 3가지가 있습니다.
- 헤더에 보여줄 값의 배열
- 데이터 객체 배열
- 컬럼에서 보여줄 객체 key값
나머지 2가지는 UI Style과 click이벤트 입니다.
🧐 느낀점
객체 배열에 대해서 이중 map을 사용을 하고 있습니다.
현재 알고리즘 공부와 Big O를 배우는 과정이기 때문에 중첩 반복문이 O(N²)으로
안좋은걸로 알고 있습니다. 그렇다면 다시 동적인 페이지로 만들어야 할까? 이것도 의문입니다.
그래서 질문을 만들어서 다른분들에게 여쭈어 보았더니 객체배열에 대해서는 많은 분들이
고민을 하는 문제였다고 합니다.
다른분의 답변으로는 "오브젝트 배열이 순환하면서 내뱉는 각 단일개의 오브젝트만 받아서
UI를 구성하는 컴포넌트만 따로 만들것 같습니다 그리고 질문자님께서 작성하신것 처럼
보여지길 원하는 키값만 따로 배열로 받아 화면을 구성하도록 할것 같습니다." 라는
답변이 있었습니다. 즉 현재 만들어진 컴포넌트랑 비슷하지만 table로 다 빼는것이 아닌
테이블 헤더와 row만 따로 UI를 만들어서 컴포넌트로 사용한다는 말인것 같습니다.
그래서 속도를 측정해보았는데 크게 차이가 없었습니다. 데이터가 많지 않아서 생기는
문제인것 같습니다. 생각해보면 한페이지에 12개씩 뿌려주는 사이트이기 때문에
크게 영향이 없다고 생각이 들었고 살짝 수정할 부분이 있다면 위에서 살짝 다른 부분을 고쳐나가야
할 것 같고 다른 좋은 방법이 있는지 계속해서 찾아보면서 수정해가야 할것 같습니다.
frontEnd Developer