Dony :)

FE로 성장 중 🌱

2022.11.14(월)

TIL 🧐

주절주절 😗

타입스트립트를 동적으로 받을 수 없는가..

headless Table 컴포넌트를 구현하면서 headScope라는 prop에 따라 ColumnTable, RowTable, BasicTable을 렌더할지를 구현했다.
그런데 Table 안에서 switch문으로 headScope에 따른 Table을 return 하고 있어 해당 Table에 따른 Row, Cell 컴포넌트도 정해줘야한다.

const Cell = (props: CellProps) => {
  const { headScope } = useTableContext();
  const { Cell: Component } = getTableBody(headScope);

  return <Component {...props} />;
};

Table.Row = Row;
Table.Cell = Cell;

때문에 위의 방식으로 구현했으나 prop의 타입 같은 경우는 동적으로 오는 값으로 어떤 Table의 CellProps을 쓸것이냐를 정해줄 수 없다.
타입스크립트는 런타임 전에 타입 체크를 해주기 때문이다. 그래서 모든 컴포넌트의 CellProps를 가져와서 extends 해주는 방법도 있다. 하지만 이렇게 될 경우 실제 사용하는 Table은 RowTable이지만 ColumnTable의 CellProps에 해당하는 값이 들어와도 에러가 발생하지 않는다..
물론 실제 런타임 때는 발생하지 않지만 타입스크립트의 장점을 잃어버리게 되어 고민이다..ㅠ 그냥 파편화 시키는게 나을까..??

아쉬워요 🙁

이런 세세한 고민들이 많다보니 진도가 느려지는거 같다. 많은 기술을 쓰는거보다 한가지 고민을 깊게 하는게 좋다고 생각하는데 또 채용공고에는 원하는 기술이 많아서 고민이다ㅠ

잘했어요 🙂

오늘 자스 스터디 때 대답을 나름 잘한거 같다..! 음 같은 추임새를 좀 더 삐야겠다.

2022.11.16(수)

TIL 🧐

주절주절 😗

styled가 젤 편한거 같다..

현재 플젝에서 기존에 사용하던 styled가 아니라 css prop으로 구현하고 있다. 그런데 불편한 점이 좀 많은거 같다.
css prop은 객체, css 리터럴, 문자열 3가지 방식으로 값을 줄 수 있다. 그런데 컴포넌트에서 hover나 attribute에 따른 스타일을 주려면 css 리터럴 밖에 안된다. 하지만 공통스타일을 중복되지 않게 빼서 사용할 때 속성 중에 theme을 사용해야한다면 객체 방식을 써야한다.

const ColumnTable: ComponentStory<typeof Table> = () => {
  const theme = useTheme();
  const headCellCSS = css`
    &:hover {
      color: #f00;
    }
  `;
  const cellCSS = { borderBottom: `0.1rem solid ${theme.palette.borderLine}` };

  return (
    <Table>
      <Table.Row>
        // 에러는 없지만 작동되지 X, cellCSS는 적용되나 headCellCSS는 적용되지 X
        // headCellCSS는 문자열이므로 당연히..
        <Table.Cell css=>제목</Table.Cell>
        <Table.Cell css={headCellCSS}>제목</Table.Cell> // 작동 잘됨.
        ...

고민하다 headCellCSS 안에 넣어보니 된다..!!

const ColumnTable: ComponentStory<typeof Table> = () => {
  const theme = useTheme();
  const cellCSS = { borderBottom: `0.1rem solid ${theme.palette.borderLine}` };
  const headCellCSS = css`
    &:hover {
      color: #f00;
    }
    ${cellCSS}
  `;

  return (
    <Table>
      <Table.Row>
        <Table.Cell css={headCellCSS}>제목</Table.Cell> // 작동 잘됨!!
        ...

그 다음 난관은 저 hover 스타일을 className 스타일로 주고 싶을 때다..

const headCellCSS = css`
  &.ascending {
    color: #f00;
  }
  ${cellCSS}
`;

이렇게 주고 싶은데 작동이 안된다..
emotion 공식 문서를 찾아보니(스타일 컴포넌츠를 쓰지만 css prop에 관한 설명은 emotion이 더 잘나와있다 ^_ㅠ..) className에 직접 스타일을 줘야한다.
이 방식은 스타일을 외부에서 지정해줘야하는 headless에 적합하지 않아 className에 줬던 부분을 data 속성에 주고 data 속성에 스타일을 주는걸로 변경했다.

const headCellCSS = css`
  &[data-sort="ascending"],
  &[data-sort="descending"] {
    color: #0091ff;
  }
  ${cellCSS}
`;

아쉬워요 🙁

스토리북 미완으로 PR보내기 실패..

잘했어요 🙂

테이블 정렬 완성..!

참고