React에서 Table 표현하기 (부제:템플릿 사용에 대한 고찰)

날짜 : 2017. 12. 19.(화)

React에서 Table 표현하기 (부제:템플릿 사용에 대한 고찰)

1. 생각하게 된 동기

1. 능력치를 표현할려니 우선 "표"를 생각하게 되었음.
2. 그런데 언제 Table Tag를 JSX로 표현해야할까? 링크

2. 생각한 내용

1. 사전설명

   • 캐릭터를 선택하면 캐릭터의 능력치가 연산되어 배열에 저장된다.
   • 저장된 배열을 가지고 Table 태그로 표현을 한다.
   • 다른 캐릭터 선택이 되면 누적이 되어 배열에 저장된다.

2. 데이터 + HTML Tag 조합

   • 클릭 이벤트에 따라 표현해야 되는 행의 수가 바뀐다.
   • 그리고 안에 들어가는 데이터도 바뀌어야 된다.

3. 현재 해결 방법

   • 미리 HTML 구조를 잡고서 표현 데이터의 수를 제한 한다. (최대2개로 제한)
   • 데이터는 1개만 들어왔을 시 1개만 표현을 한다.
   • 3개째 부터는 연산부터의 과정을 skip 한다.

<table>
   <tr>
      <td><%=데이터1%></td>
   </tr>
   <tr>
   <% if (데이터2) { %>
      <td><%=데이터2%></td>
   <%} %>
   </tr>
</table>

4. 앞으로의 고민
   • 결국 템플릿을 어떻게 사용하는 냐의 문제인것 같다.
   • 다른 사이트와 소스코드를 참고하는 것 이외에 현재 뾰족한 방법이 떠오르지 않는다.