[NextJS] Syled-components props 전달 하는 방법

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

React 로 개발할 때는 그냥 props 전달해주면 바로바로 사용할 수 있었던 것 같은데 ..

Nextjs + Typescript 로 개발하려니 props 가 전달이 안된다 .. 계속 없는 오버러드라고 사용할 수가 없단다.
난 정말 타입스크립트가 너무 어렵다 .. ㅠ

<PercentageBar similarPercentage={thirdSimilarPercentage} />

width: ${(props) => props.similarPercentage}%;

 

해서 해결방법은 인터페이스를 만들고 사용하는 방법이다.

생각보다 간단하긴 한데 타입스크립트를 알고 쓰기 위해서는 많은 공부가 필요할 것 같다 ..

해당 코드는 % 막대기를 만들면서 작성한 코드이다.

export const PercentageBar = styled.div<styledInterface["similarPercentage"]>`
  width: 100%;
  height: 12px;
  background-color: #f6f6f6;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: ${(props) => props.similarPercentage}%;
    height: 100%;
    background-color: #6c8dff;
  }
`;

여기서 중요한 코드는 styledInterface["similarPercentage"] 라는 코드인데

컴포넌트에 전달되는 속성 중 similarPercentage 속성의 타입을 지정해주면 된다.

styledInterface.tsx

export interface styledInterface {
  similarPercentage: {
    similarPercentage?: number;
  };
}

이런식으로 하니까 에러가 발생하지 않았다.