표(Table)을 만들 때 사용하는 코드 (1편)

코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다.

 

시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. 

• react
• typescript
• styled-component

 

만들어야 하는 결과물은 다음과 같다.

pc

 

mobile

고려해야 할 조건은 아래의 10개 정도로, 꽤 많다.

1. 표의 각 셀은 제목과 내용으로 이루어져 있음
2. 제목과 내용은 기본적으로 텍스트(string)가 온다고 가정하지만, 경우에 따라 어떤 요소든 받을 수 있어야 함
3. 한 행에는 1개 혹은 2개의 셀이 올 수 있음
4. 행의 높이는 가장 내용이 많은 셀 기준으로 맞춰짐 (수직정렬은 가운데)
5. 행에 셀이 1개 인지 2개 인지에 따라 셀의 크기가 달라짐 (전체 너비의 100% / 50%)
6. 표의 너비는 컨테이너의 너비에 따라 반응형으로 결정
7. 셀의 윤곽선(border)은 서로 겹치지 않음
8. 2개의 셀이 있는 행은, 모바일에서는 셀마다 다른 행으로 나뉨
9. 테이블 작성 시에는 border나 셀 개수에 따른 셀 크기 등을 신경 쓸 필요가 없어야 함
10. 필요시 1개의 셀을 가진 행의 너비를 50%로 줄일 수 있어야 함

 

표 작성에 사용된 코드는 다음과 같다 (tsx확장자에 작성된 jsx코드)

return (
    <AccordionWithTitle title="접을 수 있음">
      {/* AccordionWithTitle 는 내용을 접을 수 있는 컨테이너 컴포넌트 입니다. */}

      <PaddingSection>
        {/* PaddingSection 은 패딩 값을 주는 섹션 컨테이너 컴포넌트입니다. */}

        <TableTitle>
          {/* 테이블의 구조는 테이블 타이틀에서 시작됩니다. */}

          <Typo head size="b6" style={{ padding: "1.2rem 0" }}>
            내용이 적당한 표 1
          </Typo>
        </TableTitle>

        <Table>
          {/* // 테이블 구조를 그릴 테이블 컴포넌트입니다. */}

          <TableRow>
            {/* // 테이블의 한 행을 표시하는 TableRow 컴포넌트 입니다. */}

            <TableCell title="이름" value="서종학" />
            {/* 테이블의 한 행에 들어가는 Cell입니다. */}
          </TableRow>
          <TableRow>
          	{/* 테이블의 한 행에 2개의 Cell이 들어가는 경우, */}
            {/* Cell의 너비는 50%가 됩니다.  */}
            <TableCell title="닉네임" value="Ryan" />
            <TableCell title="별명" value="-" />
          </TableRow>
          <TableRow>
            <TableCell title="잘 하는 것" value="시간 까먹기" />
          </TableRow>
          <TableRow>
            <TableCell title="이메일" value="unqocn@gmail.com" />
          </TableRow>
          <TableRow>
            <TableCell title="주소" value="서울시 중구 어딘가" />
            <TableCell title="집전화" value="-" />
          </TableRow>
        </Table>
      </PaddingSection>
      <PaddingSection>
        <TableTitle>
          <Typo head size="b6" style={{ padding: "1.2rem 0" }}>
            내용이 적당한 표 2
          </Typo>
        </TableTitle>
        <Table>
          <TableRow>
            <TableCell title="수입" value="???원" />
            <TableCell title="지출" value="???원" />
          </TableRow>
          <TableRow>
            <TableCell
              title="미래"
              isHalf
              value={
                <FlexDiv
                  ai="center"
                  jc="center"
                  style={{
                    width: "100%",
                    height: "100%",
                    color: "white",
                    backgroundColor: "black",
                  }}
                >
                  어두움
                </FlexDiv>
              }
            />
          </TableRow>
        </Table>
      </PaddingSection>
      <PaddingSection>
        <TableTitle>
          <Typo head size="b6" style={{ padding: "1.2rem 0" }}>
            내용이 많은 표 3
          </Typo>
        </TableTitle>
        <Table>
          <TableRow>
            <TableCell
              title="저축률"
              value={`30% (2년 이상) \n/ 20% (2년 미만) \n/ 10% (1년 미만)`}
            />
            <TableCell
              title="산정방법"
              value={`저축금액 \n= 내 기분 x 내 기분 x 내 기분`}
            />
          </TableRow>
        </Table>
      </PaddingSection>
    </AccordionWithTitle>
  );

전체적인 구조 자체가 어렵지 않게 구현되었다.

 

<TableTitle/> 컴포넌트 안에 테이블의 제목을 작성하고,

 

<Table>

    <TableRow>

        <TableCell/>

        <TableCell/>

    </TableRow>

    <TableRow>

        ...

    </TableRow>

    ...

</Table>

 

테이블 안에 테이블의 각 행, 각 행 안에 Cell이 들어가있어 작성과 유지보수 모두 나름 용이한 구조로 작성이 가능하다.

 

다음 시간엔 차근차근 Table, TableTitle 컴포넌트 내용에 대해 알아보도록 하자.

 

2편 보러가기