이번 프로젝트를 진행하면서, 다양한 테이블 UI를 구현해야 했다.
보통 table 태그는 colSpan이나 rowSpan을 활용해서 좀 더 다양하고 디테일 한 UI를 구현했는데, 이번에는 정말, 무척이나 어려웠다. 이것을 컴포넌트 화 하지 못하여서, UI 작업에 방해가 있었다.
하드코딩으로 작업을 진행할 수는 있었지만, 컴포넌트로 만들면 양산은 무난했기에
정말 머리를 돌돌 싸매며 컴포넌트 만드는 걸 도전했고, 성공했다.
일단 내가 고생한 테이블 UI는 아래와 같다.
테이블 UI는 새로운 신입 개발자가 미리 만들어 놓은 코드가 있기에, 그 코드 안에서 응용해야 했다.
테이블 UI은 셀마다 각각 다른 태그를 가지고 있다. 어떤 cell은 dropdown, 어떤 cell은 text, 또는 input(type =text)로 되어있었다.
신입 개발자는 json 형식으로, 각 셀의 제목을 기준으로 그 제목의 열에 어떤 타입의 tag가 들어가는지 보여주었다.
예를 들어, 설비 종류라는 태그가 있고 그 열의 요소가 dropdown이면 type = “dropdown”인 것이다.
예) const coatingHeader = [{name : ‘설비종류’, type: ‘dropdown’}] 그리고, dom에 보여질 UI code에는 type에 맞게 text 또는 input, dropdown
컴포넌트가 아래와 같이 보여지게 된다.
그런데 이것을
위와 같이 만들어야 했다. 그래서 나는 기존의 json형식을 좀 더 디테일 하게 만들어야 했다.
먼저, json 형식에 child라는 key의 객체를 추가했다. 그리고 다음과 같이 하였다.
const coatingHeader = [
{name : '투입량', type:'array',
child :[
{name : '슬러리 사용량', type : 'text'},
{name : 'Foil 사용량', type :'text'}
]
},
{name : '수율 Loss', type:'array2',
child : [
{
name : '선택항목', type : ['dropdown','dropdown']
},
{
name : '상세값', type : ['input', 'input']
}
]
}
]나는 array와 array2라는 객체를 만들었다. 그리고 DOM에 보여질 UI에는 type에 array와 array2에 맞게 컴포넌트가 보이도록 하였다.
특히, 그 자손 태그에 dropdown, text, input 컴포넌트로 분기 되도록 작업을 처리해주었다.
지금은 정리가 되어 글로 남겨 놓을 수 있었지만, 이 방법을 생각하기까지 정말 생각을 많이 했다.
그리고 감사했다. 결국엔 해결했다는 것을, 이렇게 내가 성장해 나감을 느낀다.
하루 하루 어려운 문제를 포기하지 않고
해결하여 나가면 난 성장할 것이라 믿는다.
