고성능 JSS

직장에서는 주로 Material-UI 을 사용합니다. 훌륭한 기본값, 훌륭한 테마, 적절하지만 다소 복잡하지만 스타일 지정 시스템을 제공하는 정말 유용한 라이브러리입니다.

JSS를 사용하여 스타일을 지정하는 가장 효과적인 방법은 작업을 덜 수행하는 것임을 알게 되었습니다. 뭐?

선택자는 당신의 친구입니다

JSS를 사용할 때마다 "구성요소"에 대해 생각하기 시작했다는 것을 깨달았습니다. 그것은 아마도 반응 전용이기 때문일 것입니다.

그러나 CSS로 생각하기 시작하면 갑자기 JSS가 훨씬 간단해집니다.

직관적으로 다음과 유사한 방식으로 JSS를 사용합니다.

const styles = createStyles({
  table: {
    padding: "1rem",
  },
  tableHead: {
    fontWeight: "bold",
  },
  tableHeadCell: {
    fontSize: "0.75rem",
  },
  tableRow: {
    padding: "0.5rem",
  },
  tableRowCell: {
    fontSize: "0.5rem",
  },
});

let useStyles = makeStyles(styles);

function TableComponent(props) {
  let { items, columns } = props;
  let classes = useStyles();
  return (
    <table className={classes.table}>
      <thead className={classes.tableHead}>
        {columns.map((column) => (
          <th className={classes.tableHeadCell}>{column}</th>
        ))}
      </thead>
      <tbody>
        {items.map((row) => (
          <tr className={classes.tableRow}>
            {row.map((cell) => (
              <td className={classes.tableRowCell}>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

I'm using good ol' fashion JSS here, but you can imagine the same principle with styled-components/emotion

익숙한 것 같죠? 각 스타일은 고유한 "구성 요소"입니다.

그러나 하나의 간단한 트릭인 선택기를 사용하여 테이블 내의 모든 항목에 스타일을 적용하는 대신 스타일을 한 번만 적용하면 성능을 높일 수 있습니다.

const styles = createStyles({
  table: {
    padding: "1rem",
    "& thead": {
      fontWeight: "bold",
      "& th": {
        fontSize: "0.75rem",
      },
    },
    "& tbody": {
      "& tr": {
        padding: "0.5rem",
        "& td": {
          fontSize: "0.5rem",
        },
      },
    },
  },
});

let useStyles = makeStyles(styles);

function TableComponent(props) {
  let { items, columns } = props;
  let classes = useStyles();
  return (
    <table className={classes.table}>
      <thead>
        {columns.map((column) => (
          <th>{column}</th>
        ))}
      </thead>
      <tbody>
        {items.map((row) => (
          <tr>
            {row.map((cell) => (
              <td>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

선택자는 당신의 친구입니다.