Styled-Components 속성으로 다른 UI표시하기 [TypeScript]

위의 코드는 버튼을 클릭할 때마다 버튼 내부의 글씨색을 바꾸는 코드이다.

각 과정을 설명하자면 먼저 BtnSystem를 styled를 사용해 정의해준다.

isActive={isActive}를 통해 BtnSystem에게 버튼 클릭 여부를 전해준다.

BtnSystem정의부에서는 color를 props로 들어온 active의 변경에 따라 다른 css를 주고자 ${} 안에 삼항 연산자를 작성해준다.

(props)⇒props.isActive ?,,, : ,,,이런식으로 작성을 해준다.

이렇게 까지 코드를 작성하고 나면 아래와 같은 오류가 발생한다.

chatGpt왈

FastOmit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>' 형식에 'isActive' 속성이 없습니다.ts(2339)은 TypeScript가 styled-components를 사용할 때 커스텀 prop(예: isActive)이 컴포넌트에 올바르게 전달되지 않는다는 것을 의미합니다.

오류 분석:

1. FastOmit와 DetailedHTMLProps:
   • TypeScript는 기본 HTML 속성(예: ButtonHTMLAttributes)을 기반으로 타입을 정의합니다.
   • FastOmit은 속성에서 특정 키를 제외하는 역할을 하며, DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>는 버튼 요소의 모든 HTML 속성의 타입을 포함합니다.
2. 커스텀 prop (isActive)에 대한 오류:
   • TypeScript가 버튼 컴포넌트(BtnSystem)에 전달된 isActive 속성을 인식하지 못하고 있습니다.
   • 이는 TypeScript가 isActive가 유효한 prop이 아니라고 판단하여 발생하는 문제입니다.

---

Styled Component를 typescript환경에서 사용할때는 넘어오는 props의 타입을 함께 지정해줘야한다.

styled.button 옆에 제너릭을 통해 타입을 지정해준다.

import { useState } from 'react';
import styled from 'styled-components';

const StyledComponentWrapper = styled.div`
  width: 100vw;
  height: 80vh;
`;
interface Container{
  isActive:boolean;
}
const BtnSystem = styled.button<Container>`
  width: 100px;
  height: 30px;
  color: ${(props) => props.isActive ? '#FF8BBD' : 'black'};
  background-color: #FFE3EF;
  border: none;
  border-radius: 8px;
  margin: 2px;
`;

const StyledComponent = () => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <StyledComponentWrapper>
      <BtnSystem isActive={isActive} onClick={handleClick}>
        click
      </BtnSystem>
    </StyledComponentWrapper>
  );
};

export default StyledComponent;

이렇게 코드를 작성하면 우리가 의도한대로 작동하는것을 확인할 수 있다.