221013 메가박스 리액트 - 극장 공지사항 테이블(table)

 

 

테이블 html 태그와 css를 정리합니다.

인라인 스타일의 문제점 

• {} === {}는 false이기 때문에, 리렌더링시에 인라인 스타일이 적용된 컴포넌트 / 일반태그가 다르다고 판단하여 돔을 새로 그리게 되어 불피요한 리로딩이 발생
• style 속성의 재사용성이 떨어짐 [ 출처 ]

 

컬럼의 width에는 인라인 스타일을 적용하여 코드를 읽기 쉽게 하려고 했으나

리액트에서는 인라인스타일을 추천하지 않는다고 합니다.

하지만 인라인스타일을 함수로 만들어 전달을 하게되면 이 문제가 해결됩니다.

const Table = () => {

    const colWidth = (px) => {

        const style = {

            width: `${px}px`,

        };

        return <col style={style}></col>;

    };

 

---

 

테이블

• <table></table> 태그로 감싸는걸로 시작합니다.
  
  
• <caption></caption> 태그에는 테이블의 제목을 넣습니다.
  브라우저에 렌더링되지 않도록 font-size : 0; 으로 스타일을 줍니다.
  
  
• <colgroup></colgroup> 태그에는 열의 width를 적용시켜줍니다. 
  제목을 제외한 col에만 너비를 주어서 가장 긴 너비를 갖도록 합니다.
  
  
• <thead></thead> 태그에는 테이블의 제목을 넣도록 합니다.
  <tbody></tbody> 태그에는 테이블의 내용을 넣도록 합니다.
  
  
• <tr></tr> 태그는 행을 만듭니다.
  
  
• <th></th> 태그는 <tr></tr> 태그 안에서 테이블의 제목을 의미합니다.
  <td></td> 태그는 <tr></tr> 태그 안에서 테이블의 내용을 의미합니다.
  <th>와 <td> 태그는 한 쌍입니다.
  
  

    return (

        <table className="board">

            <caption>극장, 제목, 지역, 등록일</caption>

            <colgroup>

                {colWidth(150)}

                <col></col>

                {colWidth(150)}

                {colWidth(120)}

            </colgroup>

            <thead>

                <tr>

                    <th>극장</th>

                    <th>제목</th>

                    <th>지역</th>

                    <th>등록일</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>코엑스</td>

                    <td className="title">

                        <Link to="#">[코엑스] 부티크 프라이빗 공사에 따른 이용 안내 (10/11~12월 중순)</Link>

                    </td>

                    <td>서울</td>

                    <td>2022.10.11</td>

                </tr>

            </tbody>

        </table>

    );

};

export default Table;

 

---

 

.board {

    border-top: 1px solid #555;

    caption {

        font-size: 0;

    }

    thead {

        tr {

            text-align: center;

            line-height: 45px;

            background: #f2f4f5;

            border-bottom: 1px solid #ddd;

            th {

                font-weight: 500;

            }

        }

    }

    tbody {

        tr {

            text-align: center;

            line-height: 45px;

            border-bottom: 1px solid #ddd;

            .title {

                text-align: start;

                &:hover {

                    text-decoration: underline;

                }

            }

        }

    }

}

 

---

 

더미데이터를 만들어 html 구조로 렌더링합니다.

const theaterTable = [

    { id: 1, number: "1", place: "코엑스", title: "    [코엑스] 부티크 프라이빗 공사에 따른 이용 안내 (10/11~12월 중순)", region: "서울", date: "2022.10.11", link: "#" },

    { id: 2, number: "2", place: "구미강동", title: "[구미강동] 10월 7일 건물정전으로 인한 상영중단 및 취소 안내", region: "부산/대구/경상   ", date: "2022.10.11", link: "#" },

    { id: 3, number: "3", place: "경북도청", title: "   [경북도청] 전산시스템 점검 일정 안내 (10/4 화요일 오전 9시부터~)", region: "부산/대구/경상   ", date: "2022.09.28", link: "#" },

    { id: 4, number: "4", place: "대전현대아울렛", title: "[긴급] 대전현대아울렛 화재로 영화관 이용불가 안내", region: "대전/충청/세종    ", date: "2022.09.26", link: "#" },

    { id: 5, number: "5", place: "상암월드컵경기장", title: "[상암월드컵경기장] 22년 9월 27(화) 축구 국가대표 평가전 경기 당일 주차 안내", region: "서울", date: "2022.09.20", link: "#" },

];

 

<tbody>

                {theaterTable.map((el) => {

                    return (

                        <tr>

                            <td className="numBody">{el.number}</td>

                            <td>{el.place}</td>

                            <td className="title">

                                <Link to={el.link}>{el.title}</Link>

                            </td>

                            <td>{el.region}</td>

                            <td>{el.date}</td>

                        </tr>

                    );

                })}

            </tbody>

        </table>