오늘 서칭한 자료 📖

TypeScript - Index Signature

오늘 작성한 자료 📃

JSX is not defined

React Dynamic Tag with TypeScript

인덱스 시그니처 속성이란?

Emotion CSS-in-JS Type declaration 2

Emotion CSS-in-JS Type declaration

오늘 배운 것 🌈

TypeScript Dynamic Tag + emotion에 적용하기

먼저 동적인 태그의 경우, JSX.intrinsicElements의 키라고 단언을 해준다면, 타입스크립트의 보수적인 추론을 해결할 수 있다.

그러나, Emotion의 styled-component는 최종 보스였다. 얘는 도통 추론을 하지 못하더라.

그래서 한 2시간은 헤맨 것 같은데... as라는 옵션이 있을줄은 꿈에도 몰랐다.

const HeaderText = ({ children, level = 1 }: HeaderTextProps) => {
  const HeaderTag = `h${level}` as keyof JSX.IntrinsicElements;
  return (
    <StyledHeaderTag as={HeaderTag} level={level} HeaderTag={HeaderTag}>
      {children}
    </StyledHeaderTag>
  );
};

이러면, 마치 as에 있는 태그로 한 마냥 결과가 도출된다.

그렇다면, styled-component에서는 어떻게 처리했을까?

const StyledHeaderTag: React.FC<HeaderTextProps> = styled.div`
  font-size: ${({ level }: { level: LevelTypes }) => {
    const fontSizes = {
      1: '24px',
      2: '18px',
      3: '14px',
      4: '11px',
    };
    return fontSizes[level];
  }};
  font-weight: 700;
`;

그냥 간단하게 div 태그로만 해도, 제대로 엘리먼트가 DOM에서 출력이 되고, 잘 처리할 수 있었다.