CoStudo 프로젝트 14주차 주간 회고록 🙂

2022.12.12

2022.12.12(월)

TIL 🧐

프로젝트
- Jamie PR - netlify.toml
- styled 동적 생성 에러
  - 수정 PR
- compound component pattern

주절주절 😗

styled 코드를 icon에서 빼자! 근데 어떻게?

Icon 컴포넌트에서 iconName prop에 따라 styled에 사용할 태그가 바뀐다. 그래서 아래와 같이 파크가 IconComponent가 동적으로 정해지고 이 컴포넌트를 styled에서 사용하기 위해 Icon 컴포넌트 내부에서 styled를 정의했다.

const Icon = ({ iconName, size = "medium", color }: IconProps) => {
  const IconComponent = icon[iconName];

  const StyledIcon = styled(IconComponent)`
    width: ${iconSizes[size]};
    height: auto;
    fill: ${({ theme }) => theme.palette[color || "primary"]};
    stroke: ${({ theme }) => theme.palette[color || "primary"]};
  `;

  return <StyledIcon />;
};

PR에서는 몰랐는데 오늘 Icon 컴포넌트를 사용하니 warning이 계속 뜨길래 찾아보니 styled를 동적으로 생성하고 있으니 컴포넌트 밖에서 styled를 선언해야한다고 한다.(위의 링크 참고)
그래서 밖으로 빼려하니 iconName을 어떻게 받지..? size랑 color는 styled에 generic으로 prop을 정해주면 되지만 styled에 넣어줄 태그는 어떻게 한담..?
첫번째 시도

const getStyledIcon = (iconName) => styled(icon[iconName])<StyledIconProps>`
  width: ${({ size = "medium" }) => iconSizes[size]};
  height: auto;
  fill: ${({ theme, color = "primary" }) => theme.palette[color]};
  stroke: ${({ theme, color = "primary" }) => theme.palette[color]};
`;

const Icon = ({ iconName, ...restProps }: IconProps) => {
  const StyledIcon = getStyledIcon(iconName);

  return <StyledIcon {...restProps} />;
};

위처럼 함수로 iconName을 넘겨 수정했으나 에러가 그대로 뜬다 😅
생각해보면 밖에서 선언만 했지 함수로 호출해서 안에서 정의하는 건 똑같다 하하

고민하다 결국 구글링! stackoverflow에서 힌트를 얻었다. 채택되지 못한 답(19)이 해결책일 때도 종종 있다. 두번째 시도

const StyledIcon = styled(icon.bell)<StyledIconProps>`
  width: ${({ size = "medium" }) => iconSizes[size]};
  height: auto;
  fill: ${({ theme, color = "primary" }) => theme.palette[color]};
  stroke: ${({ theme, color = "primary" }) => theme.palette[color]};
`;

const Icon = ({ iconName, ...restProps }: IconProps) => (
  <StyledIcon as={icon[iconName]} {...restProps} />
);

우선은 styled에 임시 icon을 넣어두고 as prop으로 태그 지정하기 as prop으로 컴포넌트가 넘어와도 되는데 잊고 있었다 ^_ㅠ
이렇게 하니 바로 해결됐다!

아쉬워요 🙁

가족 여행 계획도 짜느라 저녁 먹고 별로 못했다ㅠㅠ

잘했어요 🙂

에러 뿌시기 성공!! warning으로 뜨면 사람들이 error만큼 해결을 잘 안하려고 한다.(나 포함) 그래서 지난 주에는 console에 이 경고를 깊게 안보다 오늘 눈에 들어와서 해결했다. 깨끗한 콘솔창을 위하여..! 🥂

Dony :)